CSS border-right-style 属性
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属性,这些效果可以在样式表中全局应用到元素上。