CSS3 box-shadow阐述

小蓝 • 2024-12-12 12:48 • 编程

一、box-shadow简介

box-shadow用于对元素添加一个或多个投影。它的语法如下：

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

box-shadow属性可以接受多个阴影值，用逗号分隔。在每个阴影值内部，可以包含1-4个值，分别为偏移量，模糊半径，扩散半径和颜色。其中，偏移量必选，其他值可选。下面，我们将按照参数的类型阐述box-shadow属性。

二、阴影偏移量

h-shadow和v-shadow是box-shadow属性中必选的参数。它们分别表示阴影的水平和垂直偏移。可以为这两个参数设置正负值，正数表示阴影在元素右侧（水平偏移）、下侧（垂直偏移），负数则表示阴影在元素左侧、上侧。

例如，下面的代码演示了一个向右两像素、向下三像素的红色阴影：

box-shadow: 2px 3px red;

此外，h-shadow和v-shadow还可以是一个长度值或百分比值，它们决定了阴影的参照物。如果这两个值为0，阴影将和元素重叠。

三、模糊半径

blur参数可选，用于设置阴影的模糊半径，也就是模糊的程度，数值越大越模糊。如果这个值为0，阴影就是一个纯色的小圆点，没有任何扩散效果。

例如，下面的代码描绘了一个红色模糊半径为5像素的阴影：

box-shadow: 2px 3px 5px red;

四、扩散半径

spread参数用于设置阴影的扩散半径，也就是阴影扩展或收缩的程度，数值越大，阴影越大。如果这个值为负，阴影就缩小到元素内部。

例如，下面的代码描绘了一个红色扩散半径为10像素的阴影：

box-shadow: 2px 3px 5px 10px red;

五、阴影颜色

color参数用于设置阴影的颜色，可以使用CSS颜色名、RGB值、十六进制值，也可以使用关键字none。如果省略这个值，默认是黑色。另外，如果在一个box-shadow值中没有color值，阴影就不会出现。

例如，下面的代码演示了一个偏移值为5像素、红色、模糊半径为5像素、扩散半径为10像素的阴影：

box-shadow: 5px 5px 5px 10px red;

六、插入阴影

inset参数用于设置阴影是嵌入还是突出。如果值为inset，阴影被内嵌到元素中，而不是通过外部投射矩形框来绘制阴影。默认情况下，阴影是投射于元素之外。

例如，下面的代码演示了一个偏移值为5像素、黑色、内嵌的阴影：

box-shadow: inset 5px 5px black;

七、不规则形状阴影

box-shadow不仅能给常见的形状添加阴影，也能给不规则形状添加阴影，这点就是传统实现方式所不能达到的。下面的代码演示了如何给一个不规则的图像添加阴影：

div {
  width: 200px;
  height: 200px;
  background: url("https://mdn.mozillademos.org/files/16480/starsolid.gif"), url("https://mdn.mozillademos.org/files/16475/moon2.png");
  background-size: 100px 100px, 80px 80px;
  border-radius: 50%;
  box-shadow: inset -3px -3px 3px rgba(0,0,0,0.5), 3px 3px 3px rgba(0,0,0,0.5);
}
                                                        原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/242318.html