Page 121 - css揭秘

16 不规则投影

背景知识
box-shadow

难题

当我们想给一个矩形或其他能用 border-radius 生成的形状（在“自
适应的椭圆”一节中可以看到一些示例）加投影时，box-shadow 的表现都
堪称完美。但是，当元素添加了一些伪元素或半透明的装饰之后，它就有些
力不从心了，因为 border-radius 会无耻地忽视透明部分。这类情况包括：

„ 半透明图像、背景图像、或者 border-image（比如老式的金质像框）；
„ 元素设置了点状、虚线或半透明的边框，但没有背景（或者当
background-clip 不是 border-box 时）；
„ 对话气泡，它的小尾巴通常是用伪元素生成的；
„ 我们在“切角效果”一节中见过的切角形状；
„ 几乎所有的折角效果，包括“折角效果”一节将提到的例子；

„ 通过 clip-path 生成的形状，比如“菱形图片”一节中提到的菱形
图像。

如果我们打算对这类元素直接应用 box-shadow，那只能得到图 4-6 这
样的结果。难道我们只能完全放弃投影效果吗？有没有办法可以解决这个
难题？

图 4-6
通过 CSS 美化过的元素无法完美
地渲染 box-shadow；图中 box-
shadow 的值为 2px 2px 10px
rgba(0,0,0,.5)

90 第 4 章 视觉效果

඀ࠡ JOEC