立体感を出すためのCSS疑似クラス before after_html/css_WEB-ITnose

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 を使用する場合は、コンテンツを割り当てる必要があります属性を指定すると、効果が表示されます。

疑似クラスを使用する Div は通常、position:relative に設定され、疑似クラス要素は通常、position:absolute に設定されます。

シャドウ効果を実現するには、通常、疑似クラス要素の box-shaw 属性が使用され、通常は div の後ろに設定され、それによってブロックされます。

div の境界半径を xxpx / xxpx に設定すると、予期しない効果が得られます。