Html
    Css
    Js

    
                        
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);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

css3曲线阴影和翘边阴影

更新时间:2020-07-22 16:45:23

0