1.边框圆角（Border Radiuas）

这个是我们在平常很常用的吧，以前我在用div圆角的时候，特别特别的痛苦，不管是用CSS来画圆角，还是用图片来画圆角都不那么容易，但是现在好了，在CSS3中，直接只需要如下面饿代码，就能做出美轮美奂的圆角效果了~~~

#box1 {
border: 1px solid #699;

/* for Mozilla Firefox */
-moz-border-radius: 20px;

/* for Safari & Google Chrome */
-webkit-border-radius: 20px;
} 

实例效果图：

2.盒阴影（Box Shadow）

就是让一个div能够产生阴影效果。代码如下：

#box1
        {
            border: 1px solid #699;
            -moz-box-shadow: 5px -5px 5px #b6ebf7;
            -webkit-box-shadow: 5px -5px 5px #b6ebf7;
            width: 100px;
            height: 100px;
            margin-left: 100px;
            margin-top: 100px;
            background-color:Gray;
            border-color:Yellow;
        }

需要注意的是，它有4个参数：

第一个参数：水平偏移的位置，它有正数或者负数。如果是正数的话，那么表示边框的右（right）边产生阴影；否则如果是负数的话，那么它的左边（left）框产生阴影效果。

第二个参数：垂直偏移的位置。它也有正数或者负数。如果是正数的话，那么表示下（bottom）边框有阴影；否则如果是负数的话，那么它的上（top）边框有阴影。

第三个参数：阴影的大小

第四个参数：颜色，这个很好理解。

实例效果图：

注意上面，第二个参数，我用的是负数。

有box shadow ，还有一个属性是text-shadow，这个主要是运用在文字上面的。

代码如下：

<div style="background-color: #535353; color: #353535; font-family: 微软雅黑; font-size: 64px; padding:20px; font-weight:bold;">
    <span style="text-shadow: -2px -2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><br>
    <span style="text-shadow: 2px 2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><br>
    <span style="text-shadow: 2px 2px 2px #000, 0px 0px 10px #fff, 0px 0px 20px #fff;">Welcome to my home!</span><br>
    <span style="color: white; text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 40px #9dd;">Welcome to my home!</span>
 </div>

实例效果图：

很酷吧！

3.透明度（Transparency or RGBA）

设定元素的透明度一直以来都是比较棘手的问题，不同的浏览器之间有不同的使用方法。

比如我以前需要如下进行设置透明度：