1、css3邊框模塊詳解以前我們只能為邊框設置純色和單調的樣式，而css3為邊框提供了許多新的屬性以支持更復雜的效果。 邊框圓角：border-radius 邊框的圓角屬性border-radius是css3最常用的屬性之一，有了這個屬性我們以后不再需要資源來實現邊框圓角，它的格式如下： 長度或百分比1,4/長度或者百分比1,4? 上面的寫法是標準的css屬性值描述語法，類似于頻繁的正則表達式。1,4表示1到4之間（包括1和4）的一個數字，?號表示0個或者1個。上面的格式前后用/分隔，第一段可以有1到4個長度或者百分比值，其次段也可以有1到4個長度或者百分比值，但其次段值可以不設置。 例如，下面的

2、形式都是合法的： 25px/20px 25px20px 25px25px/20px 第一段的值定義4個圓角橫向的半徑，其次段的值定義4個圓角縱向的半徑，4個值根據挨次設置top-left、top-right、bottom-right和bottom-left4個圓角。其次段的值不設置時，縱向半徑等于橫向半徑，例如x1x2x3x4和x1x2x3x4/x1x2x3x4的含義全都。 border-radius:x1x2x3x4/y1y2y3y4的設置效果如下圖所示： 下面給出一個圓角示例： button background-image:linear-gradient(top,ecf2f6,83bcf

3、4); border:1px5f88b7solid; border-radius:4px; padding:8px18px; font-size:15px; border-radius可分解為4個屬性border-top-left-radius、border-top-rightradius、border-bottom-right-radius、border-bottom-left-radius，我們能用這4 個屬性來分離設置4個角的圓角。 border-radius有一個十分好玩的功能：實現各種圓形效果。實現一個圓的代碼如下： width:100px; height:100px; border

4、-radius:50px; background-color:2ec8e9; 實現1/4個圓的代碼如下： width:100px; height:100px; border-bottom-left-radius:100px; background-color:2ec8e9; 實現1/8個圓的代碼如下： width:0px; border-left:100pxsolidtransparent; border-top:100pxsolid2ec8e9; border-top-left-radius:100px; 邊框色彩：border-color 利用邊框色彩屬性border-color，我們能夠

5、為邊框創建十分酷炫的色彩效果，比如下面的代碼： html5與css3之美。 邊框圖像：border-image 邊框圖像屬性讓我們能夠用法來定義邊框的樣式。它的另外一個作用是可以采納類似于windows桌面背景的方式來設定邊框，用一張小來實現一個大的邊框效果。 border-image屬性可以分解為4個屬性，即border-image-source、border-imageslice、border-image-width和border-image-repeat，下面具體介紹一下這4個屬性。 1.border-image-source border-image-source用于指定邊框圖像的ur

6、l地址，這類似于background-url屬性。 2.border-image-slice border-image-slice屬性會將圖像分成9個格子，根據設置的值對圖像舉行裁切，如下圖所示可以像margin一樣，為它設置一個值或多個值。設置一個值時top、right、bottom、left方向的裁切都用法這個值；設置兩個值時，top和bottom采納前面一個值，left和right采納后面一個值；設置3個值時，top采納第一個值，left和right采納其次個值，bottom采納第三個值；假如設置4個值，就分離對應top、right、bottom、left這4個方向。 這里可以解釋一下，

7、border-image-slice可以根據百分比和像素舉行裁切，方式如下圖所示： 注重border-image-slice根據像素舉行裁切時，其值是沒有單位的，比如border-imageslice:17。 3.border-image-width border-image-width定義邊框圖像的顯示區域，它需要和border-image-slice一起用法，用斜線分隔，其寫法為border-image-slice/border-image-width。另外，我們可以用法border-width屬性來定義邊框的寬度，以下兩種格式的效果是徹低一樣的： border-image:url(bor

8、der.png)50/17px; /*50即border-image-slice的值，17px即border-image-width屬性的值*/ 和 border-image:url(border.png)50;border-width:17px; 注重和border-image-slice不一樣，border-image-width值必需要加上單位，如17px。 4.border-image-repeat border-image-repeat定義裁剪的top、right、bottom、left圖像如何排布，是縮放還是平鋪，它有3個值，分離是stretch、repeat和round。stre

9、tch是默認值，代表拉伸，repeat代表重復，round代表平鋪。repeat和round的區分在于設置為repeat時，可以只顯示圖像的一部分，而設置為round時，假如長度或者寬度不是圖像的整數倍，圖像將會拉伸，以保證顯示的圖像數量是整數。 stretch、repeat、round這3種方式的顯示效果如下圖所示，請注重repeat和round的細微差別。 注重border-image-repeat的值不能超過2個。當值為兩個時，前面一個定義top和bottom邊框圖像的排布方式，而后一個定義left和right邊框圖像的排布方式。另外截至成書時，在webkit內核掃瞄器（如chrome和

10、safari）中，round值尚未實現，其效果和repeat全都。 以上4個屬性可以合成為border-image屬性。在css標準中，采納單個屬性或者合成的形式都可以，只是現在許多掃瞄器并不支持單獨屬性的形式。以下兩種代碼的效果徹低一樣： border-image-source:url(border.png); border-image-slice:105; border-image-width:12px; border-image-repeat:repeat; 和 border-image:url(border.png)105/12pxrepeat; 好了，通過border-image屬性，我們就能通過一副小實現自適應的復雜邊框效果。 盒陰影：box-shadow 盒陰影屬性box-shadow可以為盒子元素設置陰影效果，其格式如下： box-shadow:陰影類型x軸位移y軸位移含糊半徑陰影大小陰影色彩 下面簡要介紹一下其中各個參數的作用。 q陰影類型不設