5个实例让你轻松了解CSS3新属性

1. #opacity {
2. background-color: #000;
3. opacity: 0.3;
4. }
   

五、投影

在photoshop里面给图片添加投影效果是毫无意义的，因为当我们把它应用到网页里的时候，我们先将投影保存为一个图片，然后把它设为背景来模拟投影的效果。现在就不用这么做了（对于现在最新的浏览器来说）不幸的是，还有一些老的浏览器无法支持此属性。
仅仅一行代码，同时设置了4个不同的属性值。

1. -webkit-box-shadow: 3px 5px 10px #ccc;
   

第一个值我设置了3px，它主要是设置标签和投影之间的水平距离；第二个值设置了5px，它主要设置标签于投影之间的垂直距离。
另一个值我设置了10px，它是投影半径，正确的解释就是投影的模糊程度或是渐变的程度。
最后一个颜色值是设置倒影的颜色，这意味着阴影不仅限于灰色阴影了，我们还可以使用红色，做成红色投影从而让投影更漂亮。
最终代码如下

1. #shadow {
2. background-color: #fff;
3. border: 1px solid #000;
4. -webkit-box-shadow: 3px 5px 10px #ccc;
5. }
   

正如你所看的，我给div定义了白色背景、黑边和灰色的投影。

六、缩放

最新的css版本，它可以调整元素标签的大小。
使用这个代码以后，我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单，可以说仅需要一行代码，当然你还可以配合使 用一些曾经使用过的属性，比如”max-width”, “max-height”, “min-width”和 “min-height”.

1. #resize {
2. background-color: #fff;
3. border: 1px solid #000;
4. resize: both;
5. overflow: auto;
6. }
   

代码里面我添加了两行css，”resize: both;” 和 “overflow: auto;”overflow这行是必须的，overflow有几个属性值，这里的overflow属性值应设置为auto。
另外一行我添加了”resize: both;”，它声明元素的水平、垂直方向是可以被缩放的。

中文原文：5个效果帮你了解css3
英文原文：5 Techniques to Acquaint You With CSS 3

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!