css3 圆角（border-radius），css3 阴影（box-shadow），css3渐变（gradient）。

前缀

-moz(例如 -moz-border-radius)用于Firefox。
-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

 

css3圆角代码

<div class="radius"></div>
.radius {
    padding:10px; width:300px; height:50px;
    border: 5px solid #dedede;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}

效果：

其他写法：

border-radius:5px 15px 20px 25px;
               上  右    下   左



css3阴影：


 语法：

外阴影：box-shadow:X Y Npx #color;

内阴影：box-shadow:inset X Y Npx #color;

文字阴影：text-shadow：X Y Npx #color;

第一个属性：阴影的X轴(可以使用负值)

第二个属性：阴影的Y轴(可以使用负值)

第三个属性：阴影的像素（大小）

第四个属性：阴影的颜色

inset是设置内阴影

 

  写法：

   <div class="shadow"></div>

      .shadow
        {
           width:300px;
           height:50px;
           box-shadow:0px 0px 8px #f00;
        }

  效果：

 

 css3渐变

 

   线性渐变 - 从上到下

     渐变代码：

   <div class="gradient"></div>

     .gradient
            {
           width:300px;
           height:50px;
           background: linear-gradient(top, #ff911b, #000);
           background: -webkit-linear-gradient(top, #ff911b, #000);
           background: -o-linear-gradient(top, #ff911b, #000);
           background: -ms-linear-gradient(top, #ff911b, #000);
           background: -moz-linear-gradient(top, #ff911b 0, #000 100%);
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff911b', endColorstr='#000', GradientType=0);/*ie6滤镜*/
}

  效果：