圖解CSS3 讀書筆記——邊框

CSS的邊框

屬性：border-style、border-width、border-color

寫法：
分開寫：E {border-style: solid;border-width: 1px;border-color: alicebule;}
合併寫：E {border: 1px solid alicebule;}

注意：

• border-style是必須屬性，其餘順序能夠打亂寫

• 若是設定 border：none，瀏覽器自動解析爲border-style：none

• 邊框大小即border-width默認爲medium

css3新增：
border-color、border-image、border-radius

CSS3：border-color

在css2中，咱們能夠運用border-color屬性給元素的邊框總體或者每一條邊框上色，可是每條邊框最多隻能使用一種顏色。

而css3改進的border-color屬性爲咱們提供了同一條邊框設置多種顏色（好比說給邊框添加一個漸變色，或者說一個彩色）的途徑。不過到目前爲止只有Firefox 3.0+的瀏覽支持這個屬性。也是由於這一點，css3的border-color應用是至關的少。

上文提到過，css3border-color只有FF支持，故運用或測試時咱們須要加上-moz-前綴。

用法：

.box{
    border：5px solid transparent;
    -moz-border-top-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-right-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-bottom-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-left-colors：<color1> <color2> <color3> <color4> <color5>;
}

咱們這時給每一條邊框都設置了5種顏色，且都佔據着5px的寬度。這個時候每種顏色的border-width爲1px。事實上，若是咱們邊框設置了x個像素的寬度，而且爲每條邊框設置了y種顏色，若x>y，則前y-1種顏色每種佔據了1px，最後一種顏色佔據x-y+1個像素。

實例：立體漸變效果

.box {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

效果:

CSS3：border-radius

border-radius相信不少前端ers都很熟悉了，就是元素圓角效果。這個屬性兼容了ie9+以及其餘主流現代瀏覽器。

基本寫法：

• 設置統一半徑的圓角：border-radius：<length>

• 設置多個半徑的圓角： border-radius：<top-left> <top-right> <bottom-right> <bottom-left>

• 設置水平垂直半徑不統一的圓角：border-radius：<horizontal-length> / <vertical-length>

• 分開設置：

  border-top-left-radius:<length> / <length>
  border-top-right-radius:<length> / <length>
  border-bottom-left-radius:<length> / <length>
  border-bottom-left-radius:<length> / <length>

  爲兼容其餘老版本的的瀏覽器，須要爲其加上前綴，而且寫法有點區別：

  FF：-moz-border-radius-topleft
  Chrome：-webkit-border-top-left-radius

  圖解CSS3中提到webkit內核瀏覽器下圖片沒有圓角效果，通過測試（基於當前本人的chrome 44+的版本）webkit內核較新版本的瀏覽器已經修正了這個問題。以下圖

Chrome下：

FF下：

border-radius還能夠作出如圓、半圓、四分之一圓、橢圓的效果：

• 圓：

  .box {

  height: 100px;     
     width: 100px;     
     border-radius:100px;/*或者50%*/     
     background: aliceblue;     margin: 20px;

  }

• 半圓：

  .box {

  height: 100px;
     width: 50px;
     border-radius: 50px 0 0 50px;/*分表表示左上角 右上角 右下角 左下角*/
     background: aliceblue;

  }

• 四分之一圓：

  .box {

  height: 100px;
     width: 50px;
     border-radius: 50px 0 0 0;/*分表表示左上角 右上角 右下角 左下角*/
     background: aliceblue;

  }

• 橢圓：

  .box {

  height: 100px;
     width: 50px;
     border-radius: 25px / 50px;/*分表表示水平半徑 垂直半徑。或者50% / 50%;*/
     background: aliceblue;

  }

CSS3：border-image

border-image屬性用以給任何元素（除border-collapse屬性爲collapse的table元素）設置圖片效果邊框，能夠用來製做圓角按鈕效果，漸變tabs效果等。border-image容許你使用一張小圖片，而且將它分割成九個小部分， 然經過延伸這個小部分使其構成一個更大的元素。

注意 ie並不支持border-image

寫法：

border-image: url top right bottom left x-repeat y-repeat

• url：採用的圖片的路徑

• top,right,bottom,left：圖片的切割方法，注意是不須要加單位的（加了會失效）。默認是px，但可使用百分比

如圖：

圖片切割方式：
這裏經過兩個實例來講明圖片切割方式：

經過切割左邊的小圖片，使其延展+拼接成右邊的大圖。
如果咱們進行以下的分割：

這樣圖片的切割長度分別爲：0（上） 30（右） 0（下） 30（左）
如今的狀況就等於用四、6兩塊小圖進行拼接和延伸:

很容易發現，只要咱們在水平和垂直方向進行延展就會達成效果圖的樣子了。

若是圖片切割成這樣：

就會發現實際效果中，會多出上下邊框的寬度。其餘沒有變化。

圖片鋪排方式：

左圖水平和垂直方向都是stretch，右圖水平是stretch，垂直是round

圖一水平和垂直均爲round，圖二水平和垂直均爲stretch，圖三均爲repeat

參考文章：Click

CSS3：box-shadow

box-shadow用來定義元素的盒子陰影。
IE8及之前的瀏覽器不支持box-shadow

用法：

border-shadow: 陰影類型 水平位移 垂直位移 模糊半徑 陰影擴展半徑 顏色

• 陰影類型默認爲： 外陰影，可設定惟一值：inset

• 水平位移：x-offset。可取正負值，正值陰影在元素右方。

• 垂直位移：y-offset。可取正負值，正值陰影在元素下方。

• 模糊半徑：值只能爲正，取值越大，陰影邊緣越模糊。

• 陰影擴展半徑：可取正負值。若無模糊半徑，設置了擴展半徑和爲元素設置邊框的效果一致。

多層陰影：
box-shadow能夠多層陰影同時使用，每層陰影之間使用「，」隔開。設置在最前的陰影將顯示在最頂層，因此必定要注意陰影的大小取值。
若陰影的設置爲：0 0 0 20px lime, 0 0 0 10px yellow, 0 0 0 8px green
則這時第一層陰影的擴展半徑爲20，顯示在最頂層；第二層陰影顯示在第一層陰影之下，此時由於第一層陰影的擴展半徑>第二層陰影的擴展半徑，因此第一層陰影會把第二層陰影覆蓋掉。

<End>