当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | border-right-style

CSS属性参考 | border-right-style

04-25

border-right-style属性用于设置一个元素右侧边框的线条样式。

在CSS中有9种预定义的边框样式,这些边框样式与9个边框关键字一一对应。

9种CSS边框样式预览图

官方语法
border-right-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
                            

参数:

  • none
    none样式的边框

    不显示右侧边框。在右侧边框上设置的颜色和宽度将会被忽略。除非设置了右侧边框图片,否则右侧边框的宽度为0。

  • hidden
    hidden样式的边框

    none相同。不显示右侧边框。在右侧边框上设置的颜色和宽度将会被忽略。除非设置了右侧边框图片,否则右侧边框的宽度为0。

  • dotted
    dotted样式的边框

    右侧边框显示为一系列圆角的圆点。圆点的圆角半径为边框宽度的一半。

  • dashed
    dashed样式的边框

    右侧边框显示为一系列方形的虚线。

  • solid
    solid样式的边框

    右侧边框显示为一条笔直的实线。

  • double
    double样式的边框

    右侧边框显示为两条实线,在它们之间有一些空隙。线条的宽度不会被指定,但是两条线条加上它们之间的空隙的宽度必须等于border-right-width指定的右侧边框的宽度。

  • groove
    groove样式的边框

    右侧边框显示为内陷浮雕效果。它和ridge效果相反。

  • ridge
    ridge样式的边框

    右侧边框显示为外凸浮雕效果。它和groove效果相反。

  • inset
    inset样式的边框

    右侧边框显示为内斜面效果。它和outset效果相反。

  • outset
    outset样式的边框

    右侧边框显示为外斜面效果。它和inset效果相反。

border-right-style的初始值为none

注意不是所有的浏览器渲染出来的边框效果都是一样的。例如Chrome浏览器渲染的圆点效果的边框(dotted)是方形的小点,而不是圆角矩形。

在规范中并没有明确指定边框圆点或虚线矩形之间的距离。各个浏览器会选择合适的距离来使边框的角对齐。

border-right-style属性可以从它的父元素的右侧边框样式中继承。

下面是border-right-style属性取值的示例代码:

border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

border-right-style: inherit;                              
                            
在线演示

下面的例子中演示了各种右侧边框取值的效果:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

下载源代码

浏览器支持

所有的现代浏览器都支持border-right-style属性,包括Chrome,Firefox,Safari,Opera,IE 以及 Android 和 iOS。

相关阅读
Previous:
上一篇:CSS属性参考 | border-right-color
Next:
下一篇:CSS属性参考 | border-right
返回顶部