<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>纯CSS3实现的各种阴影效果</title>
<style>
body {
padding: 20px 0 0
font: 14px/1.5 Arial, sans-serif
text-align: center
color: #333
background: #FAF0D9
}
a {
font-weight: bold
color: #346AA8
}
a: hover,
a: focus,
a: active {
text-decoration: none
}
.container {
position: relative
z-index: 1
width: 600px
padding: 20px
margin: 0 auto
background: #FAF0D9
}
.container: after {
content: ""
display: block
clear: both
visibility: hidden
height: 0
font-size: 0
}
/* Shared styles*/
.drop-shadow {
position: relative
float: left
width: 40%
padding: 1em
margin: 2em 10px 4em
background: #fff
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset
}
.drop-shadow: before,
.drop-shadow: after {
content: ""
position: absolute
z-index: -2
}
.drop-shadow p {
font-size: 16px
font-weight: bold
}
/* Lifted corners*/
.lifted {
-moz-border-radius: 4px
border-radius: 4px
}
.lifted: before,
.lifted: after {
bottom: 15px
left: 10px
width: 50%
height: 20%
max-width: 300px
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7)
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7)
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7)
-webkit-transform: rotate(-3deg)
-moz-transform: rotate(-3deg)
-o-transform: rotate(-3deg)
transform: rotate(-3deg)
}
.lifted: after {
right: 10px
left: auto
-webkit-transform: rotate(3deg)
-moz-transform: rotate(3deg)
-o-transform: rotate(3deg)
transform: rotate(3deg)
}
/* Curled corners*/
.curled {
border: 1px solid #efefef
-moz-border-radius: 0 0 120px 120px / 0 0 6px 6px
border-radius: 0 0 120px 120px / 0 0 6px 6px
}
.curled: before,
.curled: after {
bottom: 12px
left: 10px
height: 55%
max-width: 200px
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4)
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4)
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4)
-webkit-transform: skew(-8deg) rotate(-4deg)
-moz-transform: skew(-8deg) rotate(-4deg)
-o-transform: skew(-8deg) rotate(-4deg)
transform: skew(-8deg) rotate(-4deg)
}
.curled: after {
right: 10px
left: auto
-webkit-transform: skew(8deg) rotate(4deg)
-moz-transform: skew(8deg) rotate(4deg)
-o-transform: skew(8deg) rotate(4deg)
transform: skew(8deg) rotate(4deg)
}
/* Perspective*/
.perspective: before {
left: 80px
bottom: 8px
width: 50%
height: 35%
max-width: 200px
-webkit-box-shadow: -80px 5px 10px rgba(0, 0, 0, 0.4)
-moz-box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4)
box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4)
-webkit-transform: skew(50deg)
-moz-transform: skew(50deg)
-o-transform: skew(50deg)
transform: skew(50deg)
-webkit-transform-origin: 0 100%
-moz-transform-origin: 0 100%
-o-transform-origin: 0 100%
transform-origin: 0 100%
}
.perspective: after {
display: none
}
/* Raised shadow - no pseudo-elements needed*/
.raised {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset
}
/* Curved shadows*/
.curved: before {
top: 10px
bottom: 10px
left: 0
right: 50%
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6)
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6)
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6)
-moz-border-radius: 10px / 100px
border-radius: 10px / 100px
}
.curved-vt-2: before {
right: 0
}
.curved-hz-1: before {
top: 50%
bottom: 0
left: 10px
right: 10px
-moz-border-radius: 100px / 10px
border-radius: 100px / 10px
}
.curved-hz-2: before {
top: 0
bottom: 0
left: 10px
right: 10px
-moz-border-radius: 100px / 10px
border-radius: 100px / 10px
}
/* Rotated box*/
.rotated {
-webkit-box-shadow: none
-moz-box-shadow: none
box-shadow: none
-webkit-transform: rotate(-3deg)
-moz-transform: rotate(-3deg)
-o-transform: rotate(-3deg)
transform: rotate(-3deg)
}
.rotated: first-child: before {
content: ""
position: absolute
z-index: -1
top: 0
bottom: 0
left: 0
right: 0
background: #fff
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset
}
</style>
<script>
var _gaq = _gaq || []
_gaq.push(['_setAccount', 'UA-7489188-1'])
_gaq.push(['_trackPageview'])
(function() {
var ga = document.createElement('script')
ga.async = true
ga.src = 'http://www.google-analytics.com/ga.js'
var s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(ga, s)
})()
</script>
</head>
<body>
<div class="container">
<h1><a href="/css-drop-shadows-without-images/">CSS drop-shadows without images</a></h1>
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
<div class="drop-shadow curled">
<p>Curled corners</p>
</div>
<div class="drop-shadow perspective">
<p>Perspective</p>
</div>
<div class="drop-shadow raised">
<p>Raised box</p>
</div>
<div class="drop-shadow curved curved-vt-1">
<p>Single vertical curve</p>
</div>
<div class="drop-shadow curved curved-vt-2">
<p>Vertical curves</p>
</div>
<div class="drop-shadow curved curved-hz-1">
<p>Single hozitonal curve</p>
</div>
<div class="drop-shadow curved curved-hz-2">
<p>Horizontal curves</p>
</div>
<div class="drop-shadow lifted rotated">
<p>Rotated box</p>
</div>
</div>
</body>
</html>
自己可以模仿成自己的效果
可以用CSS3的阴影属性。 不过要支持IE6的话，加载个 .htc 行为文件就好了。border: 1px solid #696padding: 60px 0text-align: centerwidth: 200px-webkit-box-shadow: #666 0px 0px 10px-moz-box-shadow: #666 0px 0px 10pxbox-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。盒子阴影的CSS实现方法
