CSS 播客 - 017:阴影
假设你收到了一份设计作品,设计中有一张 T 恤的图片, 并带有阴影 设计师可以告诉您,产品图片是动态的 并且可通过内容管理系统 因此阴影也需要是动态的他们不再是 T 恤 图片可以是遮蔽物、短裤或任何其他物品。 如何使用 CSS 实现这一目的?
CSS 具有
box-shadow
和
text-shadow
个媒体资源,
但图片不是文字,因此您无法使用 text-shadow
。
如果您使用 box-shadow
,则阴影位于周围的方框上。
而不是在 T 恤周围。
幸运的是,还有一种选择:
drop-shadow()
过滤条件。
这样,您就可以完全按照设计人员的要求完成工作。
CSS 中关于阴影的选择有很多
分别针对不同应用场景而设计
方框阴影
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
box-shadow
属性用于为 HTML 元素的框添加阴影。
它适用于块元素和内嵌元素。
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
box-shadow
的值顺序如下:
- 水平偏移: 正数将它从左侧推出,而负数会将它从右侧推出。
- 垂直偏移: 正数将它从顶部向下推, 负数则从底部向上推。
- 模糊半径: 数值越大,阴影越模糊, 而较小的数字会产生更清晰的阴影。
- 展开半径(可选): 阴影越大,阴影越大;阴影越小; 如果设为 0,则与 blur radius 大小相同。
- Color: 任何有效的颜色值。 如未定义,系统将使用计算出的文本颜色。
要将方框阴影设为内部阴影,请执行以下操作:
而不是默认的外部阴影,
在其他属性之前添加 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;
}
文字阴影
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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 个方框阴影。