css伪类before after 实现立体效果

当前位置 : 首页 > 网页制作 > CSS > css伪类before after 实现立体效果

css伪类before after 实现立体效果

来源: 作者: 时间:2016-01-25 10:01
div {width:200px;height:200px;border:1px solid ccc;position: relative;background-color: fff;float: left;text-align: center; margin: 30px;} div1::after { z-index:
div {
	width:200px;
	height:200px;
	border:1px solid #ccc;
	position: relative;
	background-color:#fff;
	float: left;
	text-align: center;
    margin: 30px;
}
.div1::after {
    z-index: -15;
	position: absolute;
	content: "";
	bottom: 14px;
	right: 7px;
	width: 36%;
	top: 59%;
	max-width: 300px;
	background: #777;
	box-shadow: 0 15px 10px #A5A5A5;
	-webkit-transform: rotate(3deg);
}
.div1::before {
    z-index: -15;
	position: absolute;
	content: "";
	bottom: 14px;
	left: 6px;
	width: 36%;
	top: 59%;
	max-width: 300px;
	background: #777;
	box-shadow: 0 15px 10px #A5A5A5;
	-webkit-transform: rotate(-3deg);
}
.div2 {
    border-bottom-right-radius: 50px;
    box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}
.div2::after {
    content: '';
	width: 22px;
	height: 22px;
	position: absolute;
	bottom: 0px;
	right: 0px;
	border-radius: 0 0 16px 0;
	box-shadow: -2px -2px 5px rgba(65, 65, 65, 0.38);
	-webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-10px,-10px);
}
.div3 {
    border-radius: 60px / 5px;
}
.div3::after {
    z-index: -15;
	position: absolute;
	content: "";
	bottom: 2px;
	left: 4%;
	width: 91%;
	height: 10px;
	max-width: 300px;
	background: #777;
	box-shadow: 0px 4px 11px 1px #A5A5A5;
	border-radius: 50%;
}
.div3::before {
    z-index: -15;
	position: absolute;
	content: "";
	left: 4%;
	width: 91%;
	height: 10px;
	top: 4px;
	max-width: 300px;
	background: #777;
	box-shadow: 0px -4px 11px 1px #A5A5A5;
	border-radius: 50%;
}



123
123
123


http://jsfiddle.net/N93a3/

总结:


如果使用before或者after必须为其赋值一个content属性,为空,才能显示出效果。使用伪类的div一般设置成position:relative;伪类元素一般设置成position:absolute。实现阴影效果一般是利用伪类元素的box-shaw属性,且一般设置在div后面,被其挡住。div的border-radius可以设置成xxpx / xxpx 可以得到意想不到的效果。

Tag:
网友评论

<