CSS border-top-style 属性

简介

CSS border-top-style 属性定义一个元素上边框的样式。它是 border-style 属性的一个子属性。

语法

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

属性值

• none：无边框。

• hidden：和 none 一样，只是在 print 预览上有所不同。

• dotted：点线。

• dashed：虚线。

• solid：实线。

• double：双线。

• groove：3D凹槽效果。

• ridge：3D凸槽效果。

• inset：3D凹边框。

• outset：3D凸边框。

• initial：将该属性设置为默认值，即 solid。

• inherit：从父元素继承该属性的值。

例子

border-top-style: dotted;

该代码表示，元素的上边框是一个点状虚线。

注意点

• border-top-style 属性一般与 border-top-width 和 border-top-color 属性一起使用，用于设置完整的上边框样式。

• 该属性可用于所有元素， 但只有在元素拥有上边框的情况下才有效。

• 如果没有设置 border-width 属性，边框的宽度默认为 0，此时 border-style 属性将被忽略。

• 如果值为 inherit，则自动继承父元素的属性值。

• 该属性嵌套在 border-top 上，需要注意样式优先级。

结论

CSS border-top-style 属性可设置的边框样式很多，应根据实际需求选择合适的样式。在使用时还要注意样式的优先级以及与其他相关属性的搭配使用。