CSS 播客 - 017:阴影
假设您已经收到了一个设计图,该设计中有一张剪出的 T 恤图并带有阴影。设计人员会告诉您,产品图片是动态的,并且可通过内容管理系统进行更新,因此阴影也需要是动态的。图片可以是遮阳帽、短裤或任何其他商品,而不是 T 恤。如何使用 CSS 来达到此目的?
CSS 具有 box-shadow
和 text-shadow
属性,但图片不是文本,因此您无法使用 text-shadow
。如果您使用 box-shadow
,阴影位于周围的方框上,而不是 T 恤周围。
幸运的是,还有另一个选项:drop-shadow()
过滤器。这样,您就可以完全按照设计人员的要求操作。CSS 中有多种阴影的选项,每种选项都针对不同的使用场景而设计。
方框阴影
box-shadow
属性用于向 HTML 元素的框添加阴影。它适用于块元素和内嵌元素。
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
box-shadow
的值顺序如下:
- 水平偏移:正数表示从左侧推出,负数表示从右侧推出。
- 垂直偏移:正数表示从顶部向下推移,负数表示将其从底部向上推。
- 模糊半径:数值越大,阴影越模糊,阴影越小,阴影越清晰。
- 扩散半径(可选):数值越大,阴影的大小就越大;数值越小,阴影的大小就越小;如果设为 0,则与模糊处理半径的大小相同。
- 颜色:任何有效的颜色值。 如果未定义,将使用计算出的文本颜色。
如需将框阴影设为内部阴影而不是默认外部阴影,请在其他属性之前添加 inset
关键字。
/* Outer shadow */
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
/* Inner shadow */
.my-element {
box-shadow: inset 5px 5px 20px 5px #000;
}
多个阴影
您可以使用 box-shadow
添加任意数量的阴影。添加一系列以逗号分隔的值集,以实现以下目的:
.my-element {
box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}
影响框阴影的属性
向框添加 border-radius
还会影响框阴影的形状。这是因为 CSS 会根据框的形状创建阴影,就好像光线指向框一样。
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
如果包含 box-shadow
的框位于具有 overflow: hidden
的容器中,阴影也不会脱离该溢出。
<div class="my-parent">
<div class="my-shadow">My shadow is hidden by my parent.</div>
</div>
.my-parent,
.my-shadow {
width: 250px;
height: 250px;
}
.my-shadow {
box-shadow: 0px 0px 20px 5px darkslateblue;
}
.my-parent {
overflow: hidden;
}
文字阴影
text-shadow
属性与 box-shadow
属性非常相似。它仅适用于文本节点。
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
text-shadow
的值与 box-shadow
的值相同,顺序相同。
唯一的区别是,text-shadow
没有 spread
值,也没有 inset
关键字。
添加 box-shadow
后,它会裁剪为框的形状,但 text-shadow
不会进行裁剪。这意味着,如果文本是完全或半透明的,阴影会透过它看到。
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
多个阴影
您可以根据需要使用 text-shadow
添加任意数量的阴影,就像使用 box-shadow
一样。只需添加一系列以英文逗号分隔的值集,即可创建一些非常酷的文本效果,例如 3D 文本。
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
阴影
如需实现沿着图片任何可能曲线的阴影,请使用 CSS drop-shadow
过滤器。该阴影将应用于 Alpha 蒙版,对于为刘海屏图片添加阴影非常有用,在本模块简介中便是如此。
.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
drop-shadow
过滤条件与 box-shadow
具有相同的值,但不允许使用 inset
关键字和 spread
值。您可以通过向 filter
属性添加多个 drop-shadow
值实例来添加任意数量的阴影。每个阴影都将使用最后一个阴影作为定位参考点。
检查您的掌握程度
考考你对阴影的了解
以下哪个阴影值是 box-shadow
所独有的?
inset
inset
是 box-shadow
独有的关键字。一个元素一次只能使用 13 个框阴影。