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濾鏡*/
}

  效果：