CSS边框设置

2/10/2017来源:心得技巧人气:3290

通过CSS边框设置可以为 div 等标签添加边框,利用CSS添加边框的格式有多种,主要包括边框大小、边框类型和边框颜色。

通过 border 单个属性设置的边框格式为 :border:边框大小 边框类型 边框颜色;

利用这种方式设置边框,标签将自动对四条边框进行设置,可以单独设置一个属性值,border 其他的属性值会有默认值补上。

border 的每一个属性值都需要用空格隔开,边框大小的单位为像素(px),边框类型有很多种,可以在W3C手册中查找需要的属性值,一般常见的有实线(solid)和虚线(deshed)。

边框的颜色设置也有多种,可以通过 井号(#) 加上六位十六进制数表示颜色,也可以通过颜色对应的英文进行着色,但是这种颜色比较严谨单一,可选较少。

通过上面的方式设置的边框过于单一,border 属性为了可以更加细致的修饰边框,还有以下的设置属性。

border-style 属性,这个属性可以修改边框的类型,属性值的填写有多种形式:

通过顺时针方向(即上、右、下、左)为这个属性附上四个属性值,可以依次修改各条边框的类型,对应的值会修改到对应的边框上(即第一个属性值为上边框类型,第二个为右边框类型,依次类推……)。

也可以只有三个属性值,在条件允许的情况下,设置三个属性值代表着上边框、右边框还有下边框,这个时候左边框的属性值讲自动和右边框的对应,即右边框是什么类型,左边框就是什么类型。

最后还可以是两个属性值,这个时候我们填写的两个属性值分别代表上边框和右边框,下边框的属性值将自动和上边框对应,左边框的属性值将自动和右边框的对应。

border-color 属性,这个属性可以修改边框的颜色,属性值的填写跟 border-style 属性值的填写也基本一致。

顺时针方向填写属性值的四个属性值为一种,通过省略左边框属性值的为一种,通过省略左边框和下边框的属性值为一种,具体颜色的属性值与前面介绍的一致。

border-width 属性,这个属性可以修改边框的颜色,属性值的填写也是大同小异,属性值为 数字 加 单位像素(px),也是三种,写法一致,这里不做介绍。

除了上面的几种设置形式,为了解决单条边框的设置属性问题,border 同样有其他的单一设置的属性。

border-left 属性,这个属性代表设置左边框,属性值有边框大小、边框类型和边框颜色,同样可以单独设置一个属性值。

依次类推,还有 border-top 属性设置上边框,border-right 属性设置右边框,border-bottom 属性设置下边框。

最后还可以单独的为单条边框设置属性值:

border-top-style:设置上边边框的类型 border-top-color:设置上边边框的颜色 border-top-width:设置上边边框的大小。

border-right-style:设置右边边框的类型 border-right-color:设置右边边框的颜色 border-right-width:设置右边边框的大小。

border-bottom-style:设置下边边框的类型 border-bottom-color:设置下边边框的颜色 border-bottom-width:设置下边边框的大小。

border-left-style:设置左边边框的类型 border-left-color:设置左边边框的颜色 border-left-width:设置左边边框的大小。

属性值决定对应的属性。