在现代网页设计中，边缘过渡效果增添了视觉吸引力，特别是当它们结合了透明和模糊效果时。今天，我们要通过一个简单的 HTML 和 Tailwind CSS 示例，探究如何实现透明模糊渐变的边缘过渡效果。

Contents
  1. 开始之前
  2. HTML 结构
  3. 透明模糊边缘的实现
  4. 效果
  5. 完整 Demo 代码

开始之前

在本例中，我们将创建一个水平滚动的条形，其中包含从“A”到“H”的字母块。目标是在条形的两端实现透明模糊的边缘，以便它平滑过渡到页面的背景。

HTML 结构

我们的 HTML 结构相对简单：一个居中的 div 容器，内部包含了多个用于展示字母的子 div。

<div class="flex justify-center items-center h-screen bg-white">
  <div class="relative">
    <!-- 过渡效果层 -->
    <div style="width: 720px" class="h-64 flex overflow-auto py-12 px-24 gap-4">
      <!-- 字母块 -->
    </div>
    <!-- 更多的代码 -->
  </div>
</div>

透明模糊边缘的实现

关键在于如何在容器两侧添加透明模糊渐变的边缘。我们利用 CSS 中的 mask-image 和 backdrop-filter 属性来实现这一效果。

<div class="absolute -top-4 left-0 w-24 h-64" style="mask-image: linear-gradient(90deg, black 40%, transparent); backdrop-filter: blur(10px);"></div>
<div class="absolute -top-4 left-0 w-24 h-64" style="background: linear-gradient(90deg, white, transparent)"></div>

这里，mask-image 属性定义了一个线性渐变，它从 40% 处的不透明黑色平滑过渡到透明。这个渐变被用作遮罩，决定了元素的哪一部分应该是可见的：黑色部分（不透明）完全显示，而透明部分则完全隐藏。

同时，backdrop-filter 属性应用了模糊效果，但这种模糊只影响元素后面的内容，而不是元素自身。这意味着我们的边缘过渡不仅仅是透明的，它们还轻轻模糊了背景内容。

下面还有一层带颜色的渐变色块，用于让底层有效内容边缘渐变到透明。（但是这种方法要求这个色块的颜色和底层背景颜色保持一致，不然会暴露该色块。另外或许可以考虑给底层div添加一个透明过渡遮罩来实现相同目的）

效果

> 下载演示视频 <

通过上述代码，我们成功实现了一个带有透明模糊渐变边缘的水平滚动条。这种效果在视觉上告诉用户内容在视觉上是连续的，同时又提供了一种平滑过渡到页面其他部分的美观方式。

完整 Demo 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="flex justify-center items-center h-screen bg-white">
    <div class="relative">
      <div 
        class="absolute -top-4 left-0 w-24 h-64"
        style="mask-image: linear-gradient(90deg, black 40%, transparent); backdrop-filter: blur(10px);"
      ></div>
      <div 
        class="absolute -top-4 left-0 w-24 h-64"
        style="background: linear-gradient(90deg, white, transparent)"
      ></div>
      <div style="width: 720px" class="h-64 flex overflow-auto py-12 px-24 gap-4">
        <div class="bg-red-400 h-30 w-48 shrink-0 flex justify-center items-center">
          <div class="text-7xl text-red-700">A</div>
        </div>
        <div class="bg-red-400 h-30 w-48 shrink-0 flex justify-center items-center">
          <div class="text-7xl text-red-700">B</div>
        </div>
        <div class="bg-red-400 h-30 w-48 shrink-0 flex justify-center items-center">
          <div class="text-7xl text-red-700">C</div>
        </div>
        <div class="bg-red-400 h-30 w-48 shrink-0 flex justify-center items-center">
          <div class="text-7xl text-red-700">D</div>
        </div>
        <div class="bg-red-400 h-30 w-48 shrink-0 flex justify-center items-center">
          <div class="text-7xl text-red-700">E</div>
        </div>
        <div class="bg-red-400 h-30 w-48 shrink-0 flex justify-center items-center">
          <div class="text-7xl text-red-700">F</div>
        </div>
        <div class="bg-red-400 h-30 w-48 shrink-0 flex justify-center items-center">
          <div class="text-7xl text-red-700">G</div>
        </div>
        <div class="bg-red-400 h-30 w-48 shrink-0 flex justify-center items-center">
          <div class="text-7xl text-red-700">H</div>
        </div>
      </div>
      <div 
        class="absolute -top-4 right-0 w-24 h-64"
        style="mask-image: linear-gradient(-90deg, black 40%, transparent); backdrop-filter: blur(10px);"
      ></div>
      <div 
        class="absolute -top-4 right-0 w-24 h-64"
        style="background: linear-gradient(-90deg, white, transparent)"
      ></div>
    </div>
  </div>
</body>
</html>

A Student on the way to full stack of Web3.