css1和css2 中的邊框?qū)傩?/p>

• border-width 設置元素邊框粗細

• border-style 設置元素邊框類型
• border-color 設置元素邊框顏色

三個屬性可以合并
border: border-width border-style border-color ;

border屬性必須包border-style,其他兩個可省略
border-width  默認值 medium (3~4px)
border-color  默認為字體的顏色
border 縮寫 1個值: TRBL  2個代表:上下 左右  3個值: 上 左右 下, 4個值:上 右 下 左

3.2 CSS3 邊框顏色屬性

-moz-border-top-colors

css3屬性 -moz-border-top-colors:color1 color2 ... colorn;

多顏色邊框 超過顏色剩余的寬度將顯示colorn的顏色 目前只支持 火狐 3.0+

3.3 圖片邊框?qū)傩?/h4>

border-image

使用時加上瀏覽器私有屬性前綴 -webkit-, -moz-, -ms-, -o-

IE 不支持, FireFox 3.5+, Chrome 3.0+, Opera 10.5+, Safari 1.0+

border-image: none |  <image>  [<number> | <percentage>] {1, 4}  [/<border-width>]  ? [stretch | repeat | round ]{0, 2}

• none: 默認值, 表示邊框無背景圖

• < image > : 設置圖片
• < number >: 設置邊框圖片的大小, 默認單位px, 可不寫單位, 可以是 1~4個值
• < percentage > : 用百分比的方式 設置截圖片的大小
• stretch | round | repeat : 設置邊框背景圖鋪放方式, 可不寫

• stretch 拉伸背景圖 默認(可不寫)
• round 平鋪邊框背景圖 ( 對邊框背景圖進行適當?shù)纳炜s, 來適應邊框?qū)挾鹊拇笮?進行排列 )
• repeat 重復邊框背景圖 ( 邊框中間向兩端不斷平鋪, 過程中保持切片大小不變, 缺點: 兩端邊緣有被切的現(xiàn)象)

為了方便理解, 可將border-image分解為如下屬性, 實際開發(fā)中不可分開寫

• 引入背景圖片: border-image-source
• 切割引入引入的背景圖片 : border-image-slice
• 邊框圖片的寬度 : border-image-width
• 邊框背景圖片的排列方式: border-image-repeat

  border-image: <border-image-source >  || <border-image-slice> || [/<border-image-width>] || <border-image-repeat>

  webkit ( Chrome, Safari ) 內(nèi)核下round和repeat無區(qū)別

  可以實現(xiàn)圖片的無變形拉伸, 例如: 聊天氣泡()保持邊框不變內(nèi)容拉伸

3.4 圓角邊框?qū)傩?/h3>

border-radius

border-radius : none | < length > {1, 4} [ / < length > {1, 4}] ?

若" / " 存在, '/'前面的值設置元素水平方向半徑, '/' 后面設置元素圓角的垂直方向半徑 ,, 若沒有'/', 水平方向和垂直方向半徑一樣

注意: 圓角屬性對< table >, 當border-collapse: collapse; 不起作用; 當border-collapse : separate; 圓角顯示正常

2值代表: top-left/bottom-right, top-right/bottom-left

3個值代表: top-left, top-right/bottom-left, bottom-right

4個值分別代表 top-left, top-right, bottom-right, bottom-left

若重置元素沒有圓角, border-radius: 0; 設置none無效果;

單個圓角效果 border-radius: 5px 0 0 0;

不建議使用以方法設置單個角圓角效果

由于各瀏覽器廠商對border-radius 子屬性解析不一致, 造成了個瀏覽器border-radius屬性的派生子屬性寫法不一致
兼容性IE9+、Firefox 4+秸侣、Chrome维苔、Safari 5+ 以及 Opera.

單獨設置圓角是不需要 ' / '

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

  兼容老版本
   1) Gecko內(nèi)核瀏覽器 (FireFox, Flock等)
   -moz-border-radius-topleft : <length>  <length>
   -moz-border-radius-topright : <length>  <length>
   -moz-border-radius-bottomright: <length>  <length>
   -moz-border-radius-bottomleft : <length>  <length>

   2)  Webkit內(nèi)核 (Chrome, Safari 等)
  -webkit-border-top-left-radius : <length>  <length>

     3) Presto和Trident 內(nèi)核 (Opera IE9+)
     border-top-left-radius : <length>  <length>

   注意 : 1. 當圓角半徑小于等于邊框厚度是, 邊框內(nèi)部是直角效果, 當大于是, 有內(nèi)圓角效果
                border-radius外邊半徑 - border-width <= 0 ,  元素內(nèi)角為直角
                border-radius外邊半徑 - border-width > 0 元素內(nèi)角具有圓角效果
                元素內(nèi)圓角半徑(border-radius內(nèi)邊半徑) = border-radius外邊半徑 - birder-width
           2. 當相鄰邊框?qū)挾炔煌瑫r, 這個角會從寬的邊平滑到過渡到窄的邊.

3.5 css3盒子陰影

border-shadow

border-shadow : none | [ inset x-offset y-offset blur-radius spread-radius color], [ inset x-offset y-offset blur-radius spread-radius color], ...

• none: 默認值, 無陰影
• inset: 陰影類型, 可選值. 如不設置, 默認是外陰影, 如設置為內(nèi)陰影 取值inset

• x-offset: 陰影的水平偏移量. 值為正, 在元素的右邊; 值為負, 在元素的左邊
• y-offset: 陰影的垂直偏移量. 值為正, 在元素的下邊; 值為負, 在元素的上邊
• blur-radius: 陰影模糊半徑. 可選值 值為整數(shù). = 0時表示無模糊效果 > 0 取值越大陰影的邊緣越模糊
• spread-radius: 陰影擴展半徑, 可選參數(shù) 正, 整個陰影擴大; 負 整個陰影縮小
• color: 陰影的顏色, 可選參數(shù) 如不設定, 會取瀏覽器的默認顏色,各個瀏覽器默認顏色不同, webkit內(nèi)核默認透明, 故一般不省略