盒子模型——边框

边框

边框的宽度     border-width

边框的颜色     border-color

边框的样式     border-style

例

border-width:10px;

border-color:orange;

border-style:solid;【solid实线的意思】

 

border-width:

默认值一般都是3个像素

border-width可以用来指定四个方向的宽度

值的情况:

四个值，上  右   下   左

三个值，上   左右    下

两个值，  上下     左右

一个值，  上下左右

除了border-width还有一组border-xxx-width

xxx可以是top(上)  right(右)   bottom(下)   left(左)

用来单独指定某一个边的宽度

 

border-color用来指定边框的颜色，同样可以分别指定四个边的边框

规则：和border-width一样

border-color也可以省略不写，如果省略了则自动使用color的颜色值

 

border-styel指定边框的样式

soild表示实线

dotted表示点状虚线

dashed虚线

double双线

border-style的默认值是none表示没有边框

规则也是一样的

 

统一一下如下：

border-width:10px;

border-color:orange;

border-style:solid;

 

border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

border:10px  orange  solid;【打乱这三个顺序也是可以的】

除了border以外还有四个border-xxx

border-top

border-right

border-bottom

border-left

上边的都只单独设置一个单独的边