CSS学习之 边框样式

1、边框样式（border-style）

      border-style属性定义了11个不同的样式，它们分别是：none（无样式）、hidden（同none）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（根据border-color的值画3D凹槽）、ridge（根据border-color的值画菱形框）、inset（根据border-style的值画3D凹边）、outset（根据border-color的值画3D凸边）、inherit（继承）。

说明：
 
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width不大于0，本属性将失去作用。
对应的脚本特性为borderStyle。请参阅我编写的其他书目。
 
示例：
 
body { border-style: double groove; }
body { border-style: double groove dashed; }
 
none hidden dotted dashed 
 
solid double groove 
 
ridge inset outset 

 

2、多种样式

      可以为边框同时定义不同的上、下、左、右边框样式，例如：

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

      其结果是段落会有一个实红上边框、一个虚线右边框、一个点线下边框和一个双线左边框。

3、单边边框样式

      border-top-style、border-right-style、border-bottom-style、border-left-style。

4、边框宽度

      border-width

5、单边边框宽度

      border-top-width、border-right-width、border-bottom-width、border-left-width。

6、边框颜色

      border-color

7、单边边框颜色

      border-top-color、border-right-color、border-bottom-color、border-left-color。

8、边框属性简写

      border-top、border-right、border-bottom、border-left。

      示例：h1 {border-top:1px solid red;}

9、单边内边框

     padding-top、padding-right、padding-bottom、padding-left。