css1和css2 中的邊框屬性
- 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 圖片邊框屬性
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, 來適應邊框寬度的大小,進行排列 )
- 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 圓角邊框屬性
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. 當相鄰邊框寬度不同時, 這個角會從寬的邊平滑到過渡到窄的邊.
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)核默認透明, 故一般不省略
