css盒子模型中的border属性

css盒子模型中的border属性

    认识border属性

我们可以通过boder属性来为元素设置边框；元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

值得注意的一点是：为元素设置边框时必须指定三个样式(边框的样式，宽度，颜色)，三者缺一不可。

每个边框有 3 个方面：宽度、样式，以及颜色。

下面内容将会具体讲解这三个方面

---

一、边框的宽度border-width： 

设置边框宽度有两种方法，第一种是值复制法按照 top-right-bottom-left 的顺序设置元素的各边边框，第二种 也可以通过单独属性分别设置边框各边的宽度，

（一）值复制（简写样式）

指定四个值，分别设置给上，右，下，左。

顺时针方向；

div{border-style:soild;border-width:10px 20px 30px 40px}

指定三个值，第一个值10px设置给上边框，第二个值设置给左边框和右边框，第三个值设置给下边框；

div{border-style:soild;border-width:10px 20px 30px}

指定两个值，第一个值设置给上下边框，第二个值设置给左右边框；

div{border-style:soild;border-width:10px 20px}

指定一个值，四个边框使用同一个值

div{border-style:soild;border-width:10px}

（二）单独属性设置边框宽度

• border-top-width  顶部边框宽度
• border-left-width   左面边框宽度
• border-right-width   右面边框宽度
• border-bottom-width  底面边框宽度

二、边框的颜色 border-color

border-color 属性，它一次可以接受最多 4 个颜色值。

可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

（一）值复制  如果颜色值小于 4 个，值复制就会起作用，与边框宽度border-width属性顺序一致。

例如： p {border-style: solid;border-color: blue green;}    就是上下边框为蓝色，左右为绿色

表达的效果

（二）单独属性设置边框颜色

还有一些单边边框颜色属性。

它们的原理与单边样式和宽度属性相同：

• border-top-color   顶部边框颜色
• border-right-color   右面边框颜色
• border-bottom-color   底面边框颜色
• border-left-color   左面边框颜色

（三）透明边框

如果我们希望创建一个不可见的边框，即透明边框。

边框颜色值 transparent。

这个值用于创建有宽度的不可见边框。

利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。

这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）

注意：transparent值，在IE7之前的版本是无法使用的，在以前的版本中浏览器或根据 color值 来设置边框的颜色

三、边框的样式border-style

样式是边框最重要的一个方面，样式控制着边框的显示，同时要注意如果没有样式，将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit （非继承）样式，包括 none。

我们最常使用的四种边框样式分别是：solid实线；dotted点状实线；dashed虚线；double双实线。

同样边框样式与边框宽度属性相似有两种设置方式：

（一）简写样式(其顺序与边框宽度顺序相同， top-right-bottom-left 的顺序)

可为一个边框定义四种样式,例如：

div{border-style：solid dotted dashed double}  

表现效果

（二）单独属性设置边框样式

• border-top-style   顶部边框样式
• border-right-style    右边边框样式
• border-bottom-style    底部边框样式
• border-left-style   左边边框样式

注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。

因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

div{border-style: solid solid solid none;}可以写成：

div{border-style: solid; border-left-style: none;}

表现效果

（三）border-style:none
none是默认值
如果边框样式为 none，即边框根本不存在，那么无论边框多大的值都不可能有宽度。


因为边框宽度自动设置为0了，而不论原先定义的是什么。


p {border-style: none; border-width: 50px;}

---

四、默认值

border-style的默认值为：none（无）  所以表格样式的属性一定不能缺少，如果缺少则border-width和border-color属性都不可使用。

border-width的默认值为：3px  希望边框宽度出现就一定要设置边框样式。

border-color的默认值为：black 黑色。

默认的边框颜色是元素本身的前景色。

如果没有为边框声明颜色，它将与元素的文本颜色相同。

另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。

这个父元素很可能是 body、div 或另一个 table。