第三章 CSS3 边框

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 |    [ | ] {1, 4}  [/]  ? [stretch | repeat | round ]{0, 2}

• none: 默认值, 表示边框无背景图

• < image > : 设置图片
• < number >: 设置边框图片的大小, 默认单位px, 可不写单位, 可以是 1~4个值
• < percentage > : 用百分比的方式 设置截图片的大小
• stretch | round | repeat : 设置边框背景图铺放方式, 可不写

• stretch 拉伸背景图 默认(可不写)
• round 平铺边框背景图 ( 对边框背景图进行适当的伸缩, 来适应边框宽度的大小,进行排列 )
• repeat 重复边框背景图 ( 边框中间向两端不断平铺, 过程中保持切片大小不变, 缺点: 两端边缘有被切的现象)

为了方便理解, 可将border-image分解为如下属性, 实际开发中不可分开写

• 引入背景图片: border-image-source
• 切割引入引入的背景图片 : border-image-slice
• 边框图片的宽度 : border-image-width
• 边框背景图片的排列方式: border-image-repeat

  border-image:   ||  || [/] || 

  webkit ( Chrome, Safari ) 内核下round和repeat无区别

  可以实现图片的无变形拉伸, 例如: 聊天气泡()保持边框不变内容拉伸

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内核浏览器 (FireFox, Flock等)
   -moz-border-radius-topleft :   
   -moz-border-radius-topright :   
   -moz-border-radius-bottomright:   
   -moz-border-radius-bottomleft :   

   2)  Webkit内核 (Chrome, Safari 等)
  -webkit-border-top-left-radius :   

     3) Presto和Trident 内核 (Opera IE9+)
     border-top-left-radius :   

   注意 : 1. 当圆角半径小于等于边框厚度是, 边框内部是直角效果, 当大于是, 有内圆角效果
                border-radius外边半径 - border-width <= 0 ,  元素内角为直角
                border-radius外边半径 - border-width > 0 元素内角具有圆角效果
                元素内圆角半径(border-radius内边半径) = 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: 阴影类型, 可选值. 如不设置, 默认是外阴影, 如设置为内阴影 取值inset

• x-offset: 阴影的水平偏移量. 值为正, 在元素的右边; 值为负, 在元素的左边
• y-offset: 阴影的垂直偏移量. 值为正, 在元素的下边; 值为负, 在元素的上边
• blur-radius: 阴影模糊半径. 可选值 值为整数. = 0时表示无模糊效果 > 0 取值越大阴影的边缘越模糊
• spread-radius: 阴影扩展半径, 可选参数 正, 整个阴影扩大; 负 整个阴影缩小
• color: 阴影的颜色, 可选参数 如不设定, 会取浏览器的默认颜色,各个浏览器默认颜色不同, webkit内核默认透明, 故一般不省略