如何设置CSS中的长尾词阴影效果？

本文共计811个文字，预计阅读时间需要4分钟。

CSS设置阴影效果：1. 通过主元素和副元素的阴影效果叠加产生曲线阴影效果；2. 添加两个副元素，将两个副元素分别向左倾斜并旋转小角度后形成平面四边形，然后遮盖在主元素上。

css设置阴影效果：1、通过主元素和副元素的阴影效果叠加产生曲线阴影效果；2、通过添加两个副元素，并将两个副元素分别向左扭曲并旋转稍小角度后形成平行四边形，然后遮盖在主元素下面来实现翘边阴影效果。

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

曲线阴影：

曲线阴影的实现原理是通过阴影的叠加效果产生的。即一个主元素设置阴影后，在主元素下面再添加一个副元素。使副元素和主元素重合，且副元素为一个弧形元素。此时主元素和副元素的阴影效果叠加产生曲线阴影。

第一步：

为主元素添加内部阴影，v和h方向的大小都设置为0，但是模糊半径设置的要较大，从而实现主元素内部的阴影效果。

第二步：

此时副元素需要变换的属性有：添加到主元素层级的下层，通过z-index来实现；在主元素后面或者前面添加副元素；副元素需要变换为弧形：border-radius:100px/10px;通过绝对定位确定副元素的位置；为副元素添加阴影。