CSS3 渐变、阴影和遮罩的使用

news2025/6/4 8:24:48

全文目录：

- 开篇语
- - **前言**
  - **1. CSS3 渐变 (Gradient)**
  - - **1.1 线性渐变 (linear-gradient)**
    - **1.2 径向渐变 (radial-gradient)**
  - **2. CSS3 阴影 (Shadow)**
  - - **2.1 盒子阴影 (box-shadow)**
    - **2.2 文本阴影 (text-shadow)**
  - **3. CSS3 遮罩 (Mask)**
  - - **3.1 基本遮罩 (mask-image)**
    - **3.2 遮罩其他属性**
    - **3.3 支持的浏览器和前缀**
  - **总结**
- 文末

开篇语

哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：C站/掘金/腾讯云/阿里云/华为云/51CTO；欢迎大家常来逛逛

今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交流，互相学习，一个人虽可以走的更快，但一群人可以走的更远。

我是一名后端开发爱好者，工作日常接触到最多的就是Java语言啦，所以我都尽量抽业余时间把自己所学到所会的，通过文章的形式进行输出，希望以这种方式帮助到更多的初学者或者想入门的小伙伴们，同时也能对自己的技术进行沉淀，加以复盘，查缺补漏。

小伙伴们在批阅的过程中，如果觉得文章不错，欢迎点赞、收藏、关注哦。三连即是对作者我写作道路上最好的鼓励与支持！

前言

CSS3 提供了丰富的视觉效果，包括渐变（gradient）、阴影（shadow）和遮罩（mask）等功能，可以极大地增强网页的视觉表现力。在现代Web设计中，这些技术被广泛应用来实现高质量的用户界面。

1. CSS3 渐变 (Gradient)

渐变是指颜色在一段区域内逐渐变化，通常用于背景、按钮等元素的装饰。CSS3 支持线性渐变（linear-gradient）和径向渐变（radial-gradient）两种常见的渐变方式。

1.1 线性渐变 (linear-gradient)

线性渐变从一个方向上渐变颜色，可以指定渐变的角度或者方向。

基本语法：

background: linear-gradient(direction, color1, color2, ...);

direction：渐变的方向，可以是角度或方向关键词（如to left，to bottom等）。
color1, color2：渐变的颜色，可以指定多个颜色。

例子：

/* 从上到下的线性渐变 */
background: linear-gradient(to bottom, #ff7e5f, #feb47b);

/* 从左上角到右下角的线性渐变 */
background: linear-gradient(45deg, #ff7e5f, #feb47b);

/* 多个颜色的渐变 */
background: linear-gradient(to right, #ff7e5f, #feb47b, #6a82fb);

1.2 径向渐变 (radial-gradient)

径向渐变是从中心向外逐渐变化的颜色。

基本语法：

background: radial-gradient(shape size at position, color1, color2, ...);

shape：渐变的形状，可以是circle（圆形）或ellipse（椭圆形）。
size：定义渐变的大小，如closest-side，farthest-corner等。
position：渐变的起始位置（默认为中心center）。
color1, color2：渐变的颜色。

例子：

/* 从中心向外的圆形径向渐变 */
background: radial-gradient(circle, #ff7e5f, #feb47b);

/* 从顶部左侧的椭圆形渐变 */
background: radial-gradient(ellipse at top left, #ff7e5f, #feb47b);

2. CSS3 阴影 (Shadow)

阴影效果可以让元素在视觉上浮动，增加深度感。CSS3 提供了 box-shadow（盒子阴影）和 text-shadow（文本阴影）两种阴影效果。

2.1 盒子阴影 (box-shadow)

box-shadow 属性为元素添加阴影效果。

基本语法：

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

h-offset：阴影水平偏移（正值表示向右偏移，负值表示向左偏移）。
v-offset：阴影垂直偏移（正值表示向下偏移，负值表示向上偏移）。
blur-radius：阴影的模糊半径，值越大阴影越模糊。
spread-radius：阴影的扩展半径，值为正时阴影会扩展，值为负时阴影会收缩。
color：阴影的颜色，可以是任何合法的颜色值。
inset：如果使用inset，阴影会被绘制在元素的内部，而不是外部。

例子：

/* 简单的阴影 */
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);

/* 多重阴影 */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(0, 0, 0, 0.2);

/* 内阴影 */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

2.2 文本阴影 (text-shadow)

text-shadow 属性为文本添加阴影效果。

基本语法：

text-shadow: h-offset v-offset blur-radius color;

h-offset：阴影的水平偏移。
v-offset：阴影的垂直偏移。
blur-radius：阴影的模糊半径。
color：阴影的颜色。

例子：

/* 简单文本阴影 */
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

/* 多重文本阴影 */
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.3);

3. CSS3 遮罩 (Mask)

遮罩允许你控制元素的透明度、形状和渐变，从而创建复杂的视觉效果。CSS3 的 mask 属性可以通过图片、渐变等方式创建遮罩。

3.1 基本遮罩 (mask-image)

mask-image 属性指定用作遮罩的图片或渐变。

基本语法：

mask-image: url('mask.png');

url('mask.png')：指定一个图像作为遮罩。图像中的透明部分会显示背景，而不透明部分会隐藏。

例子：

/* 使用图片遮罩 */
.element {
  mask-image: url('mask.png');
  -webkit-mask-image: url('mask.png'); /* 兼容旧版浏览器 */
}

/* 使用渐变遮罩 */
.element {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

3.2 遮罩其他属性

mask-size：设置遮罩图片的大小。
mask-repeat：控制遮罩图片是否平铺。
mask-position：设置遮罩图片的位置。

例子：

/* 使用遮罩和渐变结合 */
.element {
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 70%);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 70%);
}