CSS border-bottom-style 属性
CSS border-bottom-style 属性
CSS border-bottom-style 属性用于定义元素底部边框的样式。
示例:
border-bottom-style: solid;
该示例定义了元素底部边框的样式为实线。
语法
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
- none: 无边框,即没有边框线。
- hidden: 隐藏边框,即与 none 类似,但是在打印时会显示。
- dotted: 点状边框,即每个边框线由点组成。
- dashed: 虚线边框,即每个边框线由短横线组成。
- solid: 实线边框,即每个边框线由实线组成。
- double: 双边框,即有两条固定宽度的边框线。
- groove: 重脉冲边框,即边框看起来像是凹陷进去的。
- ridge: 凸脉冲边框,即边框看起来像是凸出来的。
- inset: 尖角边框,即边框看起来像是嵌入到页面中。
- outset: 圆角边框,即边框看起来像是浮出页面。
初值
initial。
继承性
可以继承。
实例
实现线性渐变边框
通过 border-image
属性可以实现线性渐变边框。
示例:
border-image: linear-gradient(to top, #4776E6, #8E54E9);
该示例将元素底部边框的样式设置为线性渐变。
实现虚线
通过 border-bottom-style
属性设置为 dashed
可以实现虚线边框。
示例:
border-bottom: 2px dashed #000;
该示例定义了元素底部边框的样式为虚线。
总结
CSS border-bottom-style 属性用于定义元素底部边框的样式,可以设置多种样式,例如实线、虚线、双边框等,也可以实现线性渐变边框。