图片阴影-曲线阴影+翘边阴影_回归曲线旁的阴影

作者：我家小花儿 | 2024-03-18 23:24:01

踩

回归曲线旁的阴影

教学视频：https://www.imooc.com/learn/240

CSS:

body {
font-family: Arial;
font-size: 20px;
}

body, ul {
margin: 0;
padding: 0;
list-style: none; /*UI列表没前面那一点*/
}

/*曲线阴影：*/

.wrap {
width: 70%;
height: 200px;
margin: 50px auto; /*上下50PX，左右居中*/
background: #fff;
}

.wrap h1 {
font-size: 20px;
text-align: center; /*h1里面的文本居中*/
line-height: 200px; /*行高，一般用与文字*/
}

.effect {
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
position: relative;
}

.effect::after, .effect::before {
content: '';
background: #f00;
position: absolute;
z-index: -1;
top: 50%;
bottom: 0;
left: 20px;
right: 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-o-box-shadow: 0 0 20px rgba(0,0,0,0.8);
border-radius: 100px/10px;
}

/*翘边阴影：*/

.box {
width: 80%;
height: auto; /*随内容的高度而撑开*/
clear: both; /*清楚全部浮动*/
overflow: hidden;
margin: 20px auto;
}

.box li {
background: #FFF;
width: 30%;
height: 310px;
float: left;
margin: 20px 10px;
border: 2px solid #efefef;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
position: relative;
}

.box li img {
display: block;
width: 99%;
height: 300px;
margin: 5px;
}

.box li:before {
content: '';
position: absolute;
z-index: -2;
width: 87%;
height: 75%;
left: 8%;
bottom: 8%;
background: none;
box-shadow: 0 15px 20px rgba(0,0,0,0.6);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
-o-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
transform: skew(-12deg) rotate(-4deg);
-webkit-transform: skew(-12deg) rotate(-4deg);
-moz-transform: skew(-12deg) rotate(-4deg);
-o-transform: skew(-12deg) rotate(-4deg);
-ms-transform: skew(-12deg) rotate(-4deg);
}

.box li:after {
content: '';
position: absolute;
z-index: -2;
width: 88%;
height: 75%;
left: 6%;
bottom: 8%;
background: none;
box-shadow: 0 15px 20px rgba(0,0,0,0.6);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
-o-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
transform: skew(12deg) rotate(4deg);
-webkit-transform: skew(12deg) rotate(4deg);
-moz-transform: skew(12deg) rotate(4deg);
-o-transform: skew(12deg) rotate(4deg);
-ms-transform: skew(12deg) rotate(4deg);
}

body:

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/266128