[转]使用CSS3阴影制作立体感效果

最新推荐文章于 2024-07-11 10:50:09 发布

gladtomeetyou

最新推荐文章于 2024-07-11 10:50:09 发布

阅读量2.7k

点赞数

分类专栏： Web开发文章标签： css 浏览器 c

Web开发专栏收录该内容

35 篇文章 0 订阅

订阅专栏

CSS3非常强大，发挥想象力便可以用它制作出非常绚丽的效果，这里就使用CSS3的两个属性来制作具有立体感的效果。效果图如下：

使用的两个CSS3属性：box-shadow、transform，基本语法：
box-shadow

box-shadow:5px 2px 6px #000;
数值从左至右：阴影水平偏移值（正值向右，负值向左）；阴影垂直偏移值（正值向下，负值向上）；阴影模糊值；阴影颜色。

transform
transform的效果很多，这里只用了旋转：

transform: rotate(-3deg)
数值表示旋转的角度，正值为顺时针，负值为逆时针。
因为CSS3还是草案，所以现有浏览器的最新版都是以私有属性来支持transform，需要加上-webkit-、-moz-、-o-、-ms-

具体实现思路：为了突显立体感，要让阴影左右重中间轻，这里使用了::before,::after伪元素，创建并让它们定位在#Demo元素后(z-index:-1)，同时设置阴影，并设置旋转，把思路用图片来表示就是这样：

这就是我们想要的效果了，具体代码看Demo：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 box-shadow</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ background:#d7d7d7;}
#demo{ display:inline-block; position:relative; margin:50px; padding:20px; background:#fafafa; box-shadow:0 0 3px rgba(0, 0, 0, 0.2); -moz-border-radius:4px; border-radius:4px; color:rgba(0,0,0, 0.8); text-shadow:0 1px 0 #fff;}
#demo::before, #demo::after{ position:absolute; content:""; top:10px; bottom:15px; left:10px; width:50%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); -ms-transform:rotate(-3deg); transform:rotate(-3deg); z-index:-1;}
#demo::after{ right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); -ms-transform:rotate(3deg); transform: rotate(3deg);}
#demo img{ vertical-align:bottom;}
</style>
</head>
<body>
<div id="demo">
  <img src="http://api.photoshop.com/home_aaa9cc05ee874f8fb3929d4ce5c41105/adobe-px-assets/e71ad2ef42e34821862244b04f533fd4" width="650" height="100" />
</div>
</body>
</html>

原文链接： http://www.iinterest.net/2011/04/21/css3-box-shadow/