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 平铺边框背景图 ( 对边框背景图进行适当的伸缩, 来适应边框宽度的大小,进行排列 )
- repeat 重复边框背景图 ( 边框中间向两端不断平铺, 过程中保持切片大小不变, 缺点: 两端边缘有被切的现象)
为了方便理解, 可将border-image分解为如下属性, 实际开发中不可分开写
- 引入背景图片: 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 ) 内核下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 : <length> <length> -moz-border-radius-topright : <length> <length> -moz-border-radius-bottomright: <length> <length> -moz-border-radius-bottomleft : <length> <length>
2) Webkit内核 (Chrome, Safari 等) -webkit-border-top-left-radius : <length> <length>
3) Presto和Trident 内核 (Opera IE9+) border-top-left-radius : <length> <length>
注意 : 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内核默认透明, 故一般不省略
