头像
css3曲线阴影和翘边阴影
Vincent 发表于 2022-03-23 12:39:48

2705 0 1
 
<p class="box-shadow1">曲线阴影</p>
<p class="box-shadow2">翘边阴影</p>
p {
	width:500px;
	height:100px;
	line-height:100px;
	text-align:center;
	background:#FFF;
}
.box-shadow1 {
	position:relative;
	box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
box-shadow1:after,.box-shadow1:before {
	content:'';
	z-index:-1;
	position:absolute;
	top:50%;
	bottom:0;
	left:10px;
	right:10px;
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	border-radius:100px/10px;
}
.box-shadow2 {
	position:relative;
	-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-o-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
}
.box-shadow2:before,.box-shadow2:after {
	content:"";
	position:absolute;
	top:20px;
	bottom:22px;
	background:transparent;
	box-shadow:0 8px 20px rgba(0,0,0,0.7);
	z-index:-1;
	background:#fff;
}
.box-shadow2:before {
	left:22px;
	right:12px;
	-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-shadow2:after {
	left:12px;
	right:22px;
	-webkit-transform:skew(12deg) rotate(4deg);
	-moz-transform:skew(12deg) rotate(4deg);
	-o-transform:skew(12deg) rotate(4deg);
	-ms-transform:skew(12deg) rotate(4deg);
}
──── 1人觉得很赞 ────
最新回复 (0)
    • 折腾BBS
      2
        登录 注册 QQ登录