CSS border-right-style 属性

介绍

border-right-style属性用于设置元素的右边框样式。这个属性定义的是四条边框中右边框的样式，如果想要同时设置四条边框，可以使用 border-style属性。

语法

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

• none ：表示无边框。
• hidden：表示边框的样式与none相同，但在打印时会显示。
• dotted：表示为虚线边框。
• dashed：表示为虚线或虚线边框。
• solid：表示为单实线边框。
• double：表示为双实线边框。
• groove：3D凹槽边框样式。
• ridge：3D垄状边框样式。
• inset：3D封边边框样式，向内凹。
• outset：3D浮雕边框样式，向外凸。
• inherit: 从父元素继承边框样式。

实例

<style>
    div {
        border-right-style: solid;
        border-right-color: royalblue;
        border-right-width: 5px;
    }
</style>
<div>这是一个例子，右边框为实色的蓝色</div>

属性值

none

border-right-style: none;

不显示边框，无默认值。

hidden

border-right-style: hidden;

该样式与none类似，不同之处在于打印时仍会显示。

dotted

border-right-style: dotted;

边框为点状。

dashed

border-right-style: dashed;

边框为虚线。

solid

border-right-style: solid;

边框为实线。

double

border-right-style: double;

双实线边框。

groove

border-right-style: groove;

3D凹槽边框。

ridge

border-right-style: ridge;

3D垄状边框。

inset

border-right-style: inset;

3D封边边框样式，向内凹。

outset

border-right-style: outset;

3D浮雕边框样式，向外凸。

inherit

border-right-style: inherit;

继承父元素边框样式。

总结

CSS border-right-style属性是用于设置元素右边框的样式。该属性支持多种样式值，比如实现了3D效果的浮雕和凹槽样式。同时，也可继承父元素边框样式。这些值的组合与设置可以实现一些非常特殊的效果，而通过CSS属性，这些效果可以在样式表中全局应用到元素上。