Heim  >  Artikel  >  Web-Frontend  >  css伪类before after 实现立体效果_html/css_WEB-ITnose

css伪类before after 实现立体效果_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:06:221085Durchsuche

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



<div class="div1">123</div>	<div class="div2">123</div>	<div class="div3">123</div>


http://jsfiddle.net/N93a3/

总结: 


  • 如果使用before或者after必须为其赋值一个content属性,为空,才能显示出效果。
  • 使用伪类的div一般设置成position:relative;伪类元素一般设置成position:absolute。
  • 实现阴影效果一般是利用伪类元素的box-shaw属性,且一般设置在div后面,被其挡住。
  • div的border-radius可以设置成xxpx / xxpx 可以得到意想不到的效果。
  • Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn