CSS-综合样式属性,边框样式属性的用法详解

mac2022-06-30  26

border 样式属性用于设置元素的边框,属于综合属性,可以单独设置边框的某一类样式也可以进行综合设置

边框的样式组成:

border-width 设置边框粗细;常用的属性值为像素(px)

border-style 设置边框线型

属性值描述solid实线dashed虚线dotted点状线

border-color 设置边框颜色;属性值可以是 颜色单词(red、purple等)、十六进制颜色值(#fff、#ff0000 等)、rgb(255,255,255);默认值为 transparent(透明),如果不设置边框颜色的在浏览器中默认显示为黑色边框,是因为继承了 html 默认的 color 属性值为:rgb(0, 0, 0)

通过 border-width、border-style、border-color 都是统一设置元素的四条边框的样式,无法单独设置某一条边框

边框简写:

上述边框样式可以进行简写(综合设置)

语法:

border: border-width border-style border-color;

示例:

border: 1px solid #f00;

单独设置某一条边框:

样式属性:

border-top 上边框border-right 右侧边框border-bottom 底部边框border-left 左侧边框

这些属性都是综合属性,需要设置 border-widht、border-style 和 border-color

示例:

border-right: 2px dashed red;

如果想要单独设置某条边框的粗细、样式或颜色,还可以进行细分;不过实际开发中用的不多

以上边框为例,样式属性有:

border-top-width 上边框的边框粗细border-top-style 上边框的边框样式border-top-color 上边框的边框颜色
最新回复(0)