CSS边框

边框

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

image

可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

 a:link img {border-style: outset;}

可以为一个边框定义多个样式，实线上边框、点线右边框、虚线下边框和一个双线左边框.采用了 top-right-bottom-left 的顺序

 p.aside {border-style: solid dotted dashed double;}

可以这样设置边框的宽度：

 p {border-style: solid; border-width: 5px;}

.html

 
 
 
 
 
 
 
 
 
 
 
 hello world
 
 

image

border-style

 
 ​
 
 
 
 ​
 
 
A dotted border
 ​
 
A dashed border
 ​
 
A solid border
 ​
 
A double border
 ​
 
A groove border
 ​
 
A ridge border
 ​
 
An inset border
 ​
 
An outset border
 
 ​
 

image

边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。