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 属性用于定义元素底部边框的样式，可以设置多种样式，例如实线、虚线、双边框等，也可以实现线性渐变边框。

CSS border-bottom-color 属性 CSS border-bottom-width 属性