CSS border-right 属性
CSS border-right 属性
CSS border-right 属性用于设置元素右边框线的样式、宽度和颜色。
语法:
border-right: 宽度 样式 颜色;
其中,宽度和颜色是可选值,样式是必须指定的值。
样式(style)的取值
- solid(实线)
- double(双线)
- dotted(点线)
- dashed(虚线)
- groove(3D凹槽线)
- ridge(3D垄状线)
- inset(3D凹边框线)
- outset(3D凸边框线)
- none(无边框)
- hidden(隐藏边框)
宽度(width)的取值
宽度可以指定为像素值、百分比、em/rem、thin、medium、thick等。
- 像素值:可指定为整数像素值,如:border-right: 2px solid #000000;
- 百分比:相对于包含块的宽度计算,如:border-right: 10% dashed #000000;
- em/rem:相对于元素的字体大小计算,如:border-right: 1em dotted #000000;
- thin:比默认值细一些,一般为1像素;
- medium:默认值,一般为3像素;
- thick:比默认值粗一些,一般为5像素。
颜色(color)的取值
颜色可以使用颜色名称、十六进制、RGB、RGBA等表示方式,如:border-right: 2px dashed red;
多边框设置
可以使用简写方式设置多个边框,顺序为:上右下左,如:border: 1px solid #000000; 表示设置四个边框为1像素黑色实线。
如果想要设置某一个方向的边框不显示,则可以添加none或hidden值,如:border: 1px solid #000000; border-bottom: none; 表示设置下边框不显示。
注意事项
- 注意浏览器兼容性。
- 当元素设置了box-sizing: border-box;时,border-right的宽度值会被计算在元素宽度内部,不占用额外宽度。
- 当元素没有内容或高度时,border-right将无法显示。
实例
div {
border-right: 2px dashed #f00;
}
上述代码表示设置一个2像素宽的红色虚线右边框。