<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=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;
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;
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;
50%;
height: 20%;
max- 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- 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;
50%;
height: 35%;
max- 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>