css3 box-shadow 盒子效果

简单的外阴影

html code:

<ul id="demo1" class="inline-style clearfix">

    <li><img alt="text-shadow" src="p_w_picpaths/page-live-pho-ag.jpg"></li>

    <li><img alt="text-shadow" src="p_w_picpaths/page-live-pho-ag.jpg"></li>

    <li><img alt="text-shadow" src="p_w_picpaths/page-live-pho-ag.jpg"></li>

</ul>

css code:

img{
	vertical-align:bottom;
}
#demo1 li{
	margin-right:10px;
	padding:2px;
	border:1px solid #ccc;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
#demo1 li:hover{
	border:1px solid rgba(82, 168, 236, 0.6);
	-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.6);
	-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
	box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}

综合阴影

html code 3:

<ul id="demo3" class="inline-style clearfix">

    <li><p>no spread<br>0 10px 10px rgba(0,0,0,0.5)</p></li>

    <li><p>spread<br>0 10px 10px <span>-10px</span> rgba(0,0,0,0.5)</p></li>

    <li><p>no spread<br>inset 0 10px 10px rgba(0,0,0,0.5),<br>inset 0 -10px 10px rgba(0,0,0,0.5)</p></li>

    <li><p>spread<br>inset 0 10px 10px <span>-10px</span> rgba(0,0,0,0.5),<br>inset 0 -10px 10px<span>-10px</span> rgba(0,0,0,0.5)</p></li>

</ul>

css code 3:

#demo3 li{

    width:320px;

    height:180px;

    background-color:#ededed;

    margin:30px 30px 0 0;

    text-align:center;

}

#demo3 li:nth-child(-n+2){

    margin-top:0;

}

#demo3 li span{

    color:#f00;

}

#demo3 li p{

    margin-top:50px;

    font-size:16px;

}

#demo3 li:nth-of-type(1){

    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);

    -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);

    box-shadow: 0 10px 10px rgba(0,0,0,0.5);

}

#demo3 li:nth-of-type(2){

    -webkit-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);

    -moz-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);

    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);

}

#demo3 li:nth-of-type(3){

    -webkit-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);

    -moz-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);

    box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);

}

#demo3 li:nth-of-type(4){

    -webkit-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);

    -moz-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);

    box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);

}

html code 4:

<ul id="demo4" class="inline-style clearfix">            <li><p>bottom right style</p></li>            <li><p>bottom style</p></li>            <li><p>top left &amp; bottom right style</p></li>            <li><p>book style</p></li>            <li><p>stick style</p></li>        </ul>

/* #demo4 */
#demo4 li{
	width:320px;
	height:180px;
	background-color:#ededed;
	margin:50px 30px 0 30px;
	text-align:center;
	line-height:180px;
	font-size:16px;
	position:relative;
}
#demo4 li:nth-child(-n+2){
	margin-top:0;
}
#demo4 li:before,
#demo4 li:after{
	position:absolute;
	z-index:-1;
}
/* bottom right style */
#demo4 li:nth-of-type(1):after{
	content:"";
	width:50%;
	height:50%;
	right:0;
	top:50%;
	box-shadow:20px 30px 15px rgba(0,0,0,0.2);
	-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
	-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
	-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
	-o-transform:skew(10deg,10deg) translate(-40px,-20px);
	transform:skew(10deg,10deg) translate(-40px,-20px);
}
/* bottom style */
#demo4 li:nth-of-type(2):before{
	content:"";
	width:50%;
	height:50%;
	left:0;
	top:50%;
	box-shadow:20px 30px 15px rgba(0,0,0,0.2);
	-moz-transform:skewX(-10deg) skewY(-10deg) translate(0,-20px);
	-webkit-transform:skew(-10deg,-10deg) translate(0,-20px);
	-ms-transform:skew(-10deg,-10deg) translate(0,-20px);
	-o-transform:skew(-10deg,-10deg) translate(0,-20px);
	transform:skew(-10deg,-10deg) translate(0,-20px);
}
#demo4 li:nth-of-type(2):after{
	content:"";
	width:50%;
	height:50%;
	right:0;
	top:50%;
	box-shadow:20px 30px 15px rgba(0,0,0,0.2);
	-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
	-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
	-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
	-o-transform:skew(10deg,10deg) translate(-40px,-20px);
	transform:skew(10deg,10deg) translate(-40px,-20px);
}
/* top left & bottom right style */
#demo4 li:nth-of-type(3):before{
	content:"";
	width:50%;
	height:50%;
	left:0;
	top:0;
	box-shadow:-20px -30px 15px rgba(0,0,0,0.2);
	-moz-transform:skewX(10deg) skewY(10deg) translate(40px,30px);
	-webkit-transform:skew(10deg,10deg) translate(40px,30px);
	-ms-transform:skew(10deg,10deg) translate(40px,30px);
	-o-transform:skew(10deg,10deg) translate(40px,30px);
	transform:skew(10deg,10deg) translate(40px,30px);
}
#demo4 li:nth-of-type(3):after{
	content:"";
	width:50%;
	height:50%;
	right:0;
	top:50%;
	box-shadow:20px 30px 15px rgba(0,0,0,0.2);
	-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
	-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
	-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
	-o-transform:skew(10deg,10deg) translate(-40px,-20px);
	transform:skew(10deg,10deg) translate(-40px,-20px);
}
/* book style */
#demo4 li:nth-of-type(4){
    background: #fff;
    background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
	background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
    border: 1px solid #ccc;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    -webkit-border-bottom-right-radius: 60px 5px;
    -moz-border-radius-bottomright: 60px 5px;
    border-bottom-right-radius: 60px 5px;
}
#demo4 li:nth-of-type(4):before{
	content:"";
	width:98%;
	height:98%;
	left:0;
	top:0;
	background-color:#fff;
	border: 1px solid #ccc;
	-webkit-transform:skew(4deg, 2deg) translate(6px, 7px);
	-moz-transform:skewX(4deg) skewY(2deg) translate(6px, 7px);
	-ms-transform:skew(4deg, 2deg) translate(6px, 7px);
	-o-transform:skew(4deg, 2deg) translate(6px, 7px);
	transform:skew(4deg, 2deg) translate(6px, 7px);
	-webkit-border-bottom-right-radius: 60px 5px;
    -moz-border-radius-bottomright: 60px 5px;
    border-bottom-right-radius: 60px 5px;
}
#demo4 li:nth-of-type(4):after{
	content:"";
	width:98%;
	height:98%;
	left:0;
	top:0;
	background-color:#fff;
	border: 1px solid #ccc;
	-webkit-transform:skew(3deg, 1deg) translate(4px, 4px);
	-moz-transform:skewX(3deg) skewY(1deg) translate(4px, 4px);
	-ms-transform:skew(3deg, 1deg) translate(4px, 4px);
	-o-transform:skew(3deg, 1deg) translate(4px, 4px);
	transform:skew(3deg, 1deg) translate(4px, 4px);
}
/* stick style */
#demo4 li:nth-of-type(5){
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#demo4 li:nth-of-type(5):before{
	content:"";
	width:110px;
	height:30px;
	background-color:rgba(255,255,0,0.2);
	z-index:1;
	top:8px;
	left:-32px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#demo4 li:nth-of-type(5):after{
	content:"";
	width:110px;
	height:30px;
	background-color:rgba(255,255,0,0.2);
	z-index:1;
	bottom:8px;
	right:-32px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}