css mask属性

作者：叶枫殇发布日期:2025-12-24 浏览:89

/* 使用 CSS mask 属性创建一个圆形遮罩效果 */

.container {
  width: 300px;
  height: 300px;
  background: url('image.jpg') no-repeat center center;
  background-size: cover;
  /* 使用径向渐变创建圆形遮罩 */
  -webkit-mask: radial-gradient(circle, white, black);
  mask: radial-gradient(circle, white, black);
}

/* 解释说明：
- `background` 设置了容器的背景图片。
- `-webkit-mask` 和 `mask` 属性用于创建遮罩效果。这里使用了径向渐变 (`radial-gradient`) 来生成一个从白色到黑色的圆形遮罩，使得背景图片只在圆形区域内显示。
- `white` 部分是透明的，`black` 部分是完全不透明的，因此只有圆形区域内的背景图像是可见的。
*/

上一篇：css3 选择器

下一篇：css 外发光