CSS的属性-边框属性

border-style(边框风格)

  • 定义边框的风格,值可以有:

none:没有边框,当border的值为none的时候,系统将会忽略[border-color]
hidden:隐藏边框,低版本浏览器不支持。
dotted:点状边框。
dashed:虚线边框。
solid:实线边框。
double:双实线边框,两条单线与其间隔的和等于border-width值。

  • border-style的值可以缩写:
    只有一个值的时候表示同时控制上下左右的边框风格。
    只有两个值的时候表示分别控制上下、左右的边框风格。
    有三个值的时候表示分别控制上、左右、下的边框风格。
    有四个只的时候表示分别控制上、右、下、左的边框风格。示例:
    <style>
            div{
                border-style: dotted ;	//表示上下左右都是点状边框
                border-style: dotted dashed ; ;  //表示上下为点状边框,左右为虚线边框
                border-style: dotted dashed solid ;  //表示上为点状边框,左右为虚线边框,下为实线边框
                border-style: dotted dashed solid double ;  //表示上为点状边框,右为虚线边框,下为实线边框,右为双实线边框
            }
    </style>

 

  • border-style还可以单独指定不同方向:
    border-top-style        设置上边的边框风格
    border-bottom-style         设置下边的边框风格
    border-left-style        设置左边的边框风格
    border-right-style        设置右边的边框风格

border-width(边框宽度)

  • 使用border-width可以定义边框的厚度

值可以是medium,thin,thick和指定数值的宽度。 

  • border-width也可以进行缩写:
    只有一个值的时候表示同时控制上下左右的边框宽度。
    只有两个值的时候表示分别控制上下、左右的边框宽度。
    有三个值的时候表示分别控制上、左右、下的边框宽度。
    有四个只的时候表示分别控制上、右、下、左的边框宽度。
  • border-width也可以单独指定不同方向:
    border-top-width        设置上边的边框宽度
    border-bottom-width        设置下边的边框宽度
    border-left-width        设置左边的边框宽度
    border-right-width        设置右边的边框宽度

border-color(边框颜色)

定义边框的颜色,值表示的方式可以是十六进制,RGB十进制和单词表示法。

  • border-color的缩写
    只有一个值的时候表示同时控制上下左右的边框颜色。
    只有两个值的时候表示分别控制上下、左右的边框颜色。
    有三个值的时候表示分别控制上、左右、下的边框颜色。
    有四个只的时候表示分别控制上、右、下、左的边框颜色。
  • border-color也可以单独指定不同方向
    border-top-color		设置上边的边框颜色
    border-bottom-color	设置下边的边框颜色
    border-left-color		设置左边的边框颜色
    border-right-color		设置右边的边框颜色

边框样式缩写

还可以把边框风格,边框宽度,边框颜色进行组合在一起,进行缩写

语法:border: 边框宽度 边框样式 边框颜色;

注意:border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。

上一篇:css3课后记录 样式引入(学习自用)


下一篇:Spring Cloud Hystrix 降级使用