作者： 一去、二三里
个人微信号： iwaleon
微信公众号： 高效程序员

网页上经常会出现一些弧形的阴影效果，看起来很漂亮，下面我们来讲述下如何用CSS来实现一个弧形阴影。

阴影

效果

首先实现一个简单的阴影效果

注释

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5)

表示一个带外阴影的元素，阴影位置x轴偏移0，y轴偏移4px，模糊范围10px，阴影颜色rgba(0, 0, 0, 0.5)

border-radius: 150px/10px

表示水平方向的半径和垂直方向的半径分别为150px、10px

z-index: -1

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

拥有更低的优先级，可用于将在一个元素放置于另一元素之后。

注释：z-index 仅能在定位元素上奏效（例如 position:absolute;）！

标题

效果

源码

设置背景色、字体、位置、行高等。下边框为蓝色部分可以暂时忽略，后面我们需要进行阴影显示用的。

弧形阴影 - 这是一个简单的弧形阴影

合并

效果

源码

这里我们将阴影的背景变为透明色，然后设置位置和大小来实现我们的效果。

弧形阴影 - 这是一个简单的弧形阴影

CSS中存在两个伪类:before 和 :after，它们特有的属性content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。

所以，我们只需要配合position: absolute ，就可以将其当成容器，拼合成弧形阴影效果。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！