CSS3 盒阴影线性渐变

在本文中，我们将介绍 CSS3 中的两个常用效果：盒阴影（Box-Shadow）和线性渐变（Linear Gradient）。这两个特性是 CSS3 的重要功能之一，可以为网页添加丰富的视觉效果。

阅读更多：CSS 教程

盒阴影（Box-Shadow）

盒阴影是一种在元素周围创建阴影效果的CSS属性。通过使用box-shadow属性，可以为元素添加荧幕外阴影或者内阴影。

下面是一个常见的盒阴影效果示例：

.box {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

上述代码中，我们创建了一个宽高为200px的方形元素，背景色为#f1f1f1，然后通过设置box-shadow属性为5px 5px 10px rgba(0, 0, 0, 0.3)，实现了一个向右下方偏移5像素、向右下方偏移5像素、模糊程度为10像素、颜色为rgba(0, 0, 0, 0.3)的盒阴影效果。

box-shadow属性的参数详解如下：
– x 偏移量：指定阴影相对于元素的水平偏移量，可以是正值（向右偏移）或负值（向左偏移）。
– y 偏移量：指定阴影相对于元素的垂直偏移量，可以是正值（向下偏移）或负值（向上偏移）。
– 模糊程度：指定阴影的模糊程度，数值越大越模糊。
– 阴影扩展：指定阴影的扩展大小，数值越大阴影越大。
– 阴影颜色：指定阴影的颜色，可以使用十六进制、RGB 或 RGBA。
可以使用逗号将多个阴影效果叠加在一起，例如：

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

上述代码中，我们在元素的右下方添加了一个黑色的阴影，同时在左上方添加了一个白色的阴影。

线性渐变（Linear Gradient）

线性渐变是一种能够在元素背景上创建平滑颜色过渡效果的CSS方法。通过使用linear-gradient()函数，我们可以实现从一个颜色向另一个颜色渐变的效果。

下面是一个线性渐变效果示例：

.box {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(to right, red, blue);
}

上述代码中，我们创建了一个宽高为200px的方形元素，然后通过设置background-image属性为linear-gradient(to right, red, blue)，实现了一个从红色到蓝色渐变的背景。

linear-gradient()函数的参数详解如下：
– 渐变方向：指定渐变的方向，例如to right表示从左到右渐变，to bottom表示从上到下渐变。
– 起始颜色和终止颜色：指定渐变的起始颜色和终止颜色，可以使用十六进制、RGB 或 RGBA。

除了起始颜色和终止颜色外，还可以指定多个颜色和位置来创建更复杂的渐变效果。例如：

.box {
  background-image: linear-gradient(to right, red, yellow 30%, green 70%, blue);
}

上述代码中，我们将渐变方向设置为从左到右，起始颜色为红色，30%位置为黄色，70%位置为绿色，终止颜色为蓝色，实现了一个从红色到黄色再到绿色，最后到蓝色的渐变背景。

总结

本文介绍了 CSS3 中的盒阴影和线性渐变两个特性。通过使用盒阴影，我们可以为元素添加阴影效果，增加元素的层次感；而线性渐变则可以为元素创建平滑的颜色过渡效果。这两个特性丰富了网页的视觉效果，为我们打造精美的网页布局提供了更多选择。通过灵活运用这些特性，我们可以创造出更加丰富、独特的网页设计。