使用CSS Mask实现分割线边缘模糊效果-html教程-PHP中文网

使用CSS Mask实现分割线边缘模糊效果

花韻仙語

发布： 2025-09-25 20:48:01

原创

405人浏览过

使用css mask实现分割线边缘模糊效果

本文将介绍如何使用 CSS Mask 属性来实现分割线边缘的模糊效果，解决分割线边缘过于锐利的问题。通过线性渐变创建遮罩，可以使分割线边缘呈现平滑过渡，提升视觉体验。本文将提供详细的代码示例和解释，帮助你轻松掌握这种技巧。

在网页设计中，分割线常用于区分不同的内容区域。然而，直接使用 border 属性创建的分割线边缘通常过于锐利，与背景的过渡不够自然，影响视觉效果。 CSS Mask 属性提供了一种优雅的解决方案，可以通过遮罩的方式实现分割线边缘的模糊效果。

CSS Mask 的基本原理

CSS Mask 允许我们使用图像或渐变来遮盖元素的部分区域。被遮盖的区域将变得透明，而未被遮盖的区域则保持可见。通过巧妙地使用渐变作为遮罩，我们可以实现各种各样的视觉效果，包括边缘模糊。

实现分割线边缘模糊的步骤

创建分割线元素: 首先，我们需要创建一个包含分割线的 HTML 元素。例如，可以使用 div 元素并设置 border-top 和 border-bottom 属性来创建水平分割线。

火龙果写作
用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

立即学习“前端免费学习笔记（深入）”；
```
<div class="divider"></div>
```
登录后复制
应用 CSS Mask: 接下来，使用 CSS 的 -webkit-mask 属性（为了兼容性，建议使用 -webkit- 前缀）来应用线性渐变遮罩。线性渐变将从透明过渡到黑色，再过渡回透明，从而实现边缘模糊的效果。
```
.divider {
  height: 4px; /* 设置分割线高度 */
  background-color: #ffffff; /* 设置分割线颜色 */
  -webkit-mask: linear-gradient(90deg, transparent, black, transparent); /* 应用遮罩 */
}
```
登录后复制
- linear-gradient(90deg, transparent, black, transparent) 定义了一个水平方向的线性渐变。
- transparent 表示完全透明。
- black 表示完全不透明。
- 通过调整 transparent 和 black 之间的过渡范围，可以控制模糊的程度。

完整示例代码

<!DOCTYPE html>
<html>
<head>
<title>CSS Mask 分割线边缘模糊</title>
<style>
body {
  background: url(https://picsum.photos/id/1003/800/400);
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.front-name {
  position: relative;
  width: 80%;
  background: #fff5;
  -webkit-mask: linear-gradient(90deg, #0000, #000, #0000);
  backdrop-filter: blur(4px);
  padding-top: 15px;
  padding-bottom: 20px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  text-align: center;
  color: black;
}
</style>
</head>
<body>
  <div class="front-name">
    This is a blurred divider example.
  </div>
</body>
</html>

登录后复制

注意事项

浏览器兼容性: -webkit-mask 属性主要用于webkit内核浏览器，如 Chrome 和 Safari。为了更好的兼容性，可以使用标准的 mask 属性，但需要根据目标浏览器进行测试。
调整模糊程度: 可以通过调整线性渐变中 transparent 和 black 的位置和过渡范围来控制模糊的程度。
背景颜色: 分割线的颜色会受到背景颜色的影响。确保选择合适的颜色组合，以达到最佳的视觉效果。