CSS3的 border-radius 和 box-shadow 及 text-shadow

標籤：

圓角邊框 border-radius

     相容到 IE9.

      border-radius: 50%, 後面的數字表示那個角的圓的半徑, 為 50% 是根據盒子寬高合成的.

      border-radius: 40px, 也表示4個角都是一個半徑為 40px 的圓.

 

border-radius: 40px 50px 60px 870px,  4個參數控制: 左上方  右上方  右下角  左下角.

      還可以分別寫為:

             border-top-left-radius: 40px;

             border-top-right-radius: 40px;

             border-bottom-right-radius: 40px;

             border-bottom-left-radius: 40px;

 

-------------------------------------------------------------------------------------------------------

 

      用 px 做參數時, 角和角不會互相影響, 且當寬高不等時, 不會變成橢圓, 會在短邊形成半圓, 而長邊依然存在.

  

width: 200px; height: 400px; border-radius: 2000px 2000px 0 0;可見無論上左和上右大小超過 width 多少, 都不會影響成為一個半徑為 width/2 的半圓.

 

-------------------------------------------------------------------------------------------------------

 

特別的, 當這樣寫時會出現這種情況:

 width: 200px; height: 200px; border-radius: 200px 2000px 30px 30px;

可以發現:2000px的設定也沒有影響, 而30px幾乎看不太出來作用.

-------------------------------------------------------------------------------------------------------

width: 200px; height: 200px; border-radius: 100px 100px 300px 400px;

當某個角的半徑超過最大邊時, 就不再按照正常方式渲染了, 且影響別的元素都等比例縮小一樣. 

-------------------------------------------------------------------------------------------------------

      

      width: 200px; height: 50px; border-radius: 100%;

      可見, 每個圓角的兩條邊都是由寬和高共同決定的, 所以成了橢圓.

------------------------------------------------------------------------------------------------------- 

      width: 200px; height: 400px; border-radius: 0 100% 0 0;

      可見, 以百分比為屬性單位會依據最大邊為半徑進行渲染(當相鄰角半徑為0時).

 

 

陰影 box-shadow

     相容到 IE9.

  

      width: 100px; height: 100px; box-shadow: 10px 20px 30px 40px red;

      第一個參數是向右位移量, 第二個參數表示向下位移量, 第三個表示實心部分的半徑, 第四個表示模糊部分的半徑(這個值可省略, 預設會有一點模糊半徑, 至於多少就不清楚咯). 

 

-------------------------------------------------------------------------------------------

      

      還可以寫多個陰影數值.

 

      box-shadow: 20px 30px 40px 50px blue, 10px 20px 30px 40px red;先寫在"上面", "下面"小的會被遮蓋.

 

-------------------------------------------------------------------------------------------

  

 

 

box-shadow: 0px 0px 40px 50px blue, 0px 0px 10px 10px red inset; 後面加 inset 表示內陰影, 內陰影也可以寫多個.

 

-------------------------------------------------------------------------------------------

 

 

 特別的, 當模糊半徑為0時就不再有陰影的感覺了, box-shadow: 0xp 0px 0px 24px. 看著感覺像一個邊框.

 

-------------------------------------------------------------------------------------------

 

 

      border: 10px solid red; box-shadow: 0px 0px 0px 24px blue; 如果有邊框, 會把陰影"撐"起來.

 

-------------------------------------------------------------------------------------------

 

文字陰影

      text-shadow 和 box-shadow 書寫方法差不多, 但沒有第實心半徑, 而且只相容到 IE10.

text-shadow: 1px 1px 0px purple;

 -------------------------------------------------------------------------------------------------------

以上寫出的並不全, 在此拋磚引玉, 有誤導之處還請不吝指點 ^^.

 

CSS3的 border-radius 和 box-shadow 及 text-shadow