WEB前端

CSS3 阴影效果用伪元素制作曲线阴影和翘边阴影

位置:首页 > WEB前端 > css3教程,2015-02-12
CSS3 阴影效果用伪元素制作曲线阴影和翘边阴影

CSS3 阴影效果用伪元素制作曲线阴影和翘边阴影

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>曲线阴影,翘边阴影http://www.ablanxue.com/</title>
</head>
<style type="text/css">
*{margin:0;padding:0;list-style:none}
.wrap{margin:50px auto;width:600px;height:200px;background-color:#e1e2de}
.wrap h1{display:inline-block;color:#e98016;text-align:center;font-size:30px;}
.effect{position:relative;-moz-box-shadow:0 0 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.2);-webkti-box-shadow:0 0 4px rgba(0,0,0,.2);-0-box-shadow:0 0 4px rgba(0,0,0,.2)}
.effect:after,.effect:before{position:absolute;top:50%;right:10px;bottom:0;left:10px;z-index:-1;border-radius:100px/10px;-moz-box-shadow:0 0 15px rgba(0,0,0,.8);box-shadow:0 0 15px rgba(0,0,0,.8);content:'';-webkti-box-shadow:0 0 15px rgba(0,0,0,.8);-0-box-shadow:0 0 15px rgba(0,0,0,.8)}
.box{position:relative;-moz-box-shadow:0 0 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.2);-webkti-box-shadow:0 0 4px rgba(0,0,0,.2);-0-box-shadow:0 0 4px rgba(0,0,0,.2)}
.box:after{position:absolute;top:50%;right:10px;bottom:10px;left:20px;z-index:-1;background:transparent;-moz-box-shadow:-3px 5px 20px rgba(0,0,0,.8);box-shadow:-3px 5px 20px rgba(0,0,0,.8);content:'';-webkit-transform:skew(0,2deg);-webkti-box-shadow:-3px 5px 20px rgba(0,0,0,.8);-0-box-shadow:-3px 5px 20px rgba(0,0,0,.8)}
.box:before{position:absolute;top:50%;right:20px;bottom:10px;left:10px;z-index:-2;background:transparent;-moz-box-shadow:3px 5px 20px rgba(0,0,0,.8);box-shadow:3px 5px 20px rgba(0,0,0,.8);content:'';-webkit-transform:skew(0,-2deg);-webkti-box-shadow:3px 5px 20px rgba(0,0,0,.8);-0-box-shadow:3px 5px 20px rgba(0,0,0,.8)}
</style>
<body>
<div class="wrap effect">
	<h1>曲线阴影</h1>
	<p>before,after 设置 border-radius:100px/10px,添加阴影,设置Z-index属性移到底部,调整位置</p>
</div>
	
<div class="wrap box">
	<h1>翘边阴影</h1>
	<p>分别对before,after进行skew,变平行四形,再行移至两个底角位置,背景background:transparent,添加阴影,调整位置。注释z-index便知原理</p>
</div>
</body>
</html>



TAGS:CSS3 阴影效果

猜你喜欢


NewHot手机版