边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩。本文将详细介绍CSS边框
,
基础样式
边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度),边框颜色和边框样式,且先后顺序无关
<>之前,,,,边界:,border-width border-color border-style ,,,边界:,1 px solid 红色;【边框样式】
如果一个边框没有样式,边框将根本不会存在
关于虚线破灭,在chrome和firefox下,虚线宽高比是3/1;而在IE下,虚线宽高比为2/1,所以在IE下虚线显得比较密
关于点线点缀,在chrome下,点线是方点;而在IE/firefox下,点线是圆点
<>前边框样式:没有(默认) 边框样式:隐藏/点/冲/固体/双/槽脊/插图/开始(共9种)【边框宽度】
边框的宽度不能为负,不能指定为百分比值。这是因为,边框并不会因为设备尺寸变大,所以百分比单位并不符合语义。类似地,还有轮廓,不必,文本阴影等
边框宽度支持3个关键字:这个/媒介/厚,分别是1 px, 3 px, 5 px,且介质为默认值.medium为3 px是因为边框样式双至少为3 px为有效果
<>之前,,,,边框宽度:,?媒介(默认)/厚度/& lt; length>【边框颜色】
默认的边框颜色是元素本身的前景色,即元素的文本颜色,如果元素没有任何文本,则边框颜色是其父元素的文本颜色。但是,在表格中,若只设置边框样式,而不设置的边界,则边框颜色为黑色,而不与文本颜色相同。类似地,还有文本阴影,不必等
<>之前,,,,,边框颜色:透明/& lt; color>[注意]CSS2.1中,在背景定位背景位置只能相对于左上角定位。如果需要是相对于右侧,则可以使用一个右侧的透明边框来实现类似的效果
& lt;演示框祝辞点击下列相应属性值可进行演示
,
边框要点
【注意事项】
边框有以下几个要点需要特别注意:
1,边框绘制在元素背景之上,如果边框样式有某种缝隙,可以通过这些缝隙看到元素的背景(有兼容问题)
2,同一元素的边框相交处是斜线,可以用边框实现三角形
3,行内元素的上下边框由于不影响行高,不影响布局;左右边框会影响布局
4,在CSS2.1中,背景定位背景位置只能相对于左上角定位。如果需要是相对于右侧,则可以使用一个右侧的透明边框来实现类似的效果
【边框单边】
<>之前,,,,,,,,border-top/边境/边界底部/border-left【边框属性】
<>之前,,,,边框宽度: ,,,,,,,,,,border-top-width border-right-width ,,,,,,,,,,border-bottom-width border-left-width ,,,边框样式: ,,,,,,,,,,border-top-style border-right-style ,,,,,,,,,,border-bottom-style border-left-style ,,,边框颜色: ,,,,,,,,,,border-top-color border-right-color ,,,,,,,border-bottom-color ,,, border-left-color【四值顺序】
<>之前,,,,边框宽度:,1 px 2 px 3 px 4 px;//上右下左 ,,,边框宽度:,1 px 2 px 3 px;//上(左,右)下 ,,,边框宽度:,1 px 2 px;//上(下)(左,右) ,,,边框宽度:,1 px;//(上下左右),
多色边框
多色边框边框颜色可以在一条边框上设置多种颜色
[注意]只有firefox支持,需要加-moz——前缀,且只能四条边分开写,否则无效
<>之前,,,,边框颜色:& lt; color> & lt; color>……,,,,边界:,10 px solid 黑色,,,,,-moz-border-top-colors:, red 绿色,,,,,-moz-border-right-colors:, green 黄色的,,,,,-moz-border-bottom-colors:, yellow 蓝色的,,,,,-moz-border-left-colors:, blue 红色; 
圆角边框
圆角边框border - radius可以为边框设置圆角(IE8 -不支持),四值顺序是左上,右上,右,下左下
border - radius:,没有(默认)
border - radius: & lt; length> {1 4} [/& lt; length> {1 4}) ?//如果反斜杠存在,前面的值是水平方向的半径,后面的值是垂直方向的半径。如果没有则水平和垂直方向相等 关于圆角边框有如下注意事项:
1, <代码> & lt; length>
2,重置border - radius没有圆角,使用没有无效,需要取值0
3,这个特性对<代码> & lt; img> 没有任何效果
4,如果取值为百分比,水平方向圆角百分比相对于宽度,垂直方向圆角百分比相对于高度
