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 上边框的边框颜色