【CSS3】渐变 阴影 遮罩

CSS3提供了多种方式来实现图形、文本的视觉效果，包括渐变、阴影、遮罩等。

1. 渐变（Gradients）

线性渐变（Linear Gradients）:

.linear-gradient {
  background: linear-gradient(to right, red , blue);
}

径向渐变（Radial Gradients）:

.radial-gradient {
  background: radial-gradient(circle, red, yellow, green);
}

2. 阴影（Box Shadow）

.box-shadow {
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

3. 遮罩（Clipping）

通过clip-path属性，你可以创建一个只有元素的某个区域可以显示的剪裁路径。

圆形遮罩:

.circle-mask {
  clip-path: circle(50%);
}

矩形遮罩:

.rectangle-mask {
  clip-path: inset(10% 20% 10% 20%);
}

4. 伪元素（Pseudo-elements）

伪元素可以用来创建遮罩，例如使用:before或:after伪元素来创建一个遮罩层。

.mask::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  opacity: 0.5;
}

这些是CSS3中实现渐变、阴影和遮罩的基本方法。根据具体需求，可以结合使用这些技术，创造出丰富多样的视觉效果。