阴影特效

--- theme: cyanosis --- ## 前言 `CSS3`新增了`box-shadow`，用于设置盒子的阴影，今天玩了一下！部分效果展示： ![预览.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e20c51fb5b7464d96158493fb7c4fee~tplv-k3u1fbpfcp-watermark.image) ## 效果1 彩色边框效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2bc7f271731945f88bd3f7778f375d06~tplv-k3u1fbpfcp-watermark.image) CSS代码如下 ```css div.one div { width: 100px; height: 100px; margin: 50px auto; background-color: rgb(245, 234, 234); box-shadow: 10px 0 15px -2px rgb(11, 11, 235), 0 -10px 15px -2px rgb(103, 167, 8), -10px 0 15px -2px rgb(228, 64, 4), 0 10px 15px -2px rgb(241, 7, 132); } div.one div:nth-of-type(1) { border-radius: 5%; } div.one div:nth-of-type(2) { border-radius: 30%; } div.one div:nth-of-type(3) { border-radius: 50%; } ``` ## 效果2 多边框效果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90715c8fd4e8415e82947c35b30ab0ce~tplv-k3u1fbpfcp-watermark.image) 代码如下 ```css .two div { width: 80px; height: 80px; margin: 50px auto; background-color: rgb(238, 226, 226); box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(241, 241, 6), 0 0 0 10px rgb(196, 144, 48) inset, 0 0 10px 20px green inset; } .two div:nth-of-type(1) { border-radius: 5%; } .two div:nth-of-type(2) { border-radius: 30%; box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(24, 248, 4), 0 0 0 10px rgb(8, 12, 238) inset, 0 0 10px 20px rgb(6, 236, 167) inset; } .two div:nth-of-type(3) { border-radius: 50%; box-shadow: 0 0 0 10px rgb(3, 233, 41), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(219, 6, 226), 0 0 0 10px rgb(97, 231, 8) inset, 0 0 10px 20px rgb(201, 198, 16) inset; } ``` ## 效果3 内阴影效果 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c44857ca93442878d80f67ed96ca17f~tplv-k3u1fbpfcp-watermark.image) 代码如下 ```css .three div { width: 200px; height: 200px; overflow: hidden; margin: 100px auto; } .three div>img { height: 200px; position: relative; z-index: -1; } .three div:nth-of-type(1) { box-shadow: 0 0 5px 10px rgba(2, 158, 248, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8); border-radius: 5%; } .three div:nth-of-type(2) { box-shadow: 0 0 5px 10px rgba(14, 228, 43, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8); border-radius: 30%; } .three div:nth-of-type(3) { box-shadow: 0 0 5px 10px rgba(245, 7, 146, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8); border-radius: 50%; } .three div:nth-of-type(4) { box-shadow: 0 0 5px 10px rgba(245, 188, 1, 0.5) inset, 0 0 35px rgba(0, 0, 0, .8); border-radius: 50%; } .three div:nth-of-type(5) { box-shadow: 0 0 5px 10px rgba(252, 116, 5, 0.5) inset, 0 0 50px rgba(0, 0, 0, .8); border-radius: 50%; } ``` ## 效果4 折角效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77258b8f43af4877a27f841714ddd265~tplv-k3u1fbpfcp-watermark.image) 代码如下： ```css ul.four { list-style: none; text-align: center; font-size: 0; } ul.four li { display: inline-block; margin: 30px; width: 480px; height: 310px; border: 10px white solid; box-shadow: 0 0 5px rgba(0, 0, 0, .5); position: relative; background: white; } ul.four li div { width: 100%; height: 100%; overflow: hidden; } ul.four li::after, ul.four li::before, ul.four li div::after, ul.four li div::before { content: ""; position: absolute; width: 120px; height: 40px; background: rgb(130, 213, 236); box-shadow: 0 4px 3px -3px rgba(0, 0, 0, .3); } ul.four li::after { right: -60px; bottom: -25px; transform: rotate(135deg); } ul.four li::before { right: -60px; top: -20px; transform: rotate(45deg); } ul.four li div::after { left: -60px; bottom: -25px; transform: rotate(-135deg); } ul.four li div::before { left: -60px; top: -20px; transform: rotate(-45deg); } ``` ## 效果5 外翘边效果 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f79b95ad4eea4fe8b2052143d7eae52f~tplv-k3u1fbpfcp-watermark.image) 代码如下： ```css ul.five { list-style: none; text-align: center; font-size: 0; display: flex; } ul.five li { display: inline-block; margin: 30px; width: 500px; height: 340px; border: 10px white solid; box-shadow: 0 0 5px rgba(0, 0, 0, .5); position: relative; background: white; } ul.five li::after, ul.five li::before { content: ""; position: absolute; z-index: -2; top: 80%; bottom: 3%; left: 1%; right: 1%; box-shadow: 0 20px 15px rgba(0, 0, 0, .6); transform: skew(0, 5deg); } ul.five li::after { transform: skew(0, -5deg); } ul.five li span { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%), linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%) } ``` ## 效果6 内翘边效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a912933929f445a3a5623433e3942c09~tplv-k3u1fbpfcp-watermark.image) 代码如下： ```css ul.six { list-style: none; text-align: center; font-size: 0; } ul.six li { display: inline-block; margin: 30px; width: 480px; height: 312px; border: 10px white solid; box-shadow: 0 0 5px rgba(0, 0, 0, .5); position: relative; background: white; border-radius: 0 0 120px 120px / 0 0 30px 30px; } ul.six li::after, ul.six li::before { content: ""; position: absolute; z-index: -2; top: 80%; bottom: 3%; left: .5%; right: .5%; box-shadow: 0 20px 15px rgba(0, 0, 0, .6); transform: skew(0, 5deg); border-radius: 40%; } ul.six li::after { transform: skew(0, -5deg); } ul.six li div { width: 100%; height: 100%; overflow: hidden; border-radius: 0 0 120px 120px / 0 0 25px 25px; position: relative; } ul.six li span { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%), linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%); } ``` ## 效果7 曲边特效 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ab4ff537faf447fa937f998db83c3be~tplv-k3u1fbpfcp-watermark.image) 代码如下： ```css ul.seven { list-style: none; text-align: center; font-size: 0; } ul.seven li { display: inline-block; margin: 30px; width: 500px; height: 330px; border: 10px white solid; box-shadow: 0 0 5px rgba(0, 0, 0, .5); position: relative; background: white; } ul.seven li::after { content: ""; position: absolute; z-index: -2; top: 80%; bottom: 0; left: 5%; right: 5%; box-shadow: 0 20px 20px rgba(0, 0, 0, .6); border-radius: 50%; } ``` # 总结最后总结一下`box-shadow`的具体用法：格式： `box-shadow: 阴影类型 X轴偏移量 Y轴偏移量阴影边缘模糊阴影扩展半径阴影色彩` - 阴影类型：包括内阴影和外阴影，默认是外阴影，可以设置`inset`即可表示内阴影 - `X`轴偏移量和`Y`轴偏移量：必填，用于表示阴影的位置，设置的值可正可负 - 阴影边缘模糊：默认为`0`，表示不模糊，模糊效果从阴影边缘向外扩展，只能是正值，模糊值越大，模糊的面积就越大，整体的阴影面积也会变大。 - 阴影扩展半径：即阴影大小，默认为`0`（不扩展），可以设置正负值，正值阴影延展扩大，负值阴影缩小。 - 阴影色彩：默认值为`currentcolor` # END 最后附件完整代码 # 附件 ```html 阴影特效多彩边框

多重边框

内阴影特效

折角效果

外翘边效果

内翘边效果

曲边效果

```