10 CSS边框属性

  • 10 CSS边框属性已关闭评论
  • 71 次浏览
  • A+
所属分类:Web前端
摘要

定义边框的风格,值可以有:border-style的值可以缩写的:border-style还可以单独指定不同方向:


10 CSS边框属性
  1. border-style(边框风格)

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

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

border-style的值可以缩写的:

/* 只有一个值的时候表示同时控制上下左右的边框风格。 只有两个值的时候表示分别控制上下、左右的边框风格。 有三个值的时候表示分别控制上、左右、下的边框风格。 有四个只的时候表示分别控制上、右、下、左的边框风格。 */ 

border-style还可以单独指定不同方向:

/* border-top-style		设置上边的边框风格 border-bottom-style	     设置下边的边框风格 border-left-style		设置左边的边框风格 border-right-style		设置右边的边框风格 */ 
  1. border-width(边框宽度)

使用border-width可以定义边框的厚度,值可以是medium,thin,thick和指定数值的宽度。 同时,border-width也可以进行缩写:

/* 只有一个值的时候表示同时控制上下左右的边框宽度。 只有两个值的时候表示分别控制上下、左右的边框宽度。 有三个值的时候表示分别控制上、左右、下的边框宽度。 有四个只的时候表示分别控制上、右、下、左的边框宽度。 */ 

border-width也可以单独指定不同方向:

/* border-top-width		设置上边的边框宽度 border-bottom-width	    设置下边的边框宽度 border-left-width		设置左边的边框宽度 border-right-width		设置右边的边框宽度 */ 
  1. border-color(边框颜色)

定义边框的颜色,值表示的方式可以是十六进制,RGB十进制和单词表示法。
同上,border-color的缩写:

/* 只有一个值的时候表示同时控制上下左右的边框颜色。 只有两个值的时候表示分别控制上下、左右的边框颜色。 有三个值的时候表示分别控制上、左右、下的边框颜色。 有四个只的时候表示分别控制上、右、下、左的边框颜色。 */ 

border-color也可以单独指定不同方向:

/* border-top-color		设置上边的边框颜色 border-bottom-color	设置下边的边框颜色 border-left-color		设置左边的边框颜色 border-right-color		设置右边的边框颜色 */ 
  1. 边框样式缩写

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

语法:// border: 边框宽度 边框样式 边框颜色; 注意,border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。