#border-top-style

#介绍

用于设置上边框的样式。

#使用示例

css-apisrc/border-top-style/App.tsx

Code

预览

#语法

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

#取值

• none 无边框。无边框属性时，边框宽度（无论宽度设置多少）将变为 0。

• hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

• dotted 点状边框。在大多数浏览器中呈现为实线。

• dashed 虚线。在大多数浏览器中呈现为实线。

• solid 实线。

• double 双线。两条线的宽度再加上这两条线之间的空间等于 border-width。CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗，所有这些都由用户决定。

• groove 3D 凹槽边框。其效果取决于 border-color 的值。

• ridge 3D 垄状边框。其效果取决于 border-color 的值。

• inset 3D inset 边框。其效果取决于 border-color 的值。

• outset 3D outset 边框。其效果取决于 border-color 的值。

#形式定义

#形式语法

<line-style>
where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

#与 Web 的区别

• mdn:border-top-style

不支持 inherit、initial、revert、unset 等

值为 'none' 或 'hidden' 时对应边框的布局宽度未设为 0

默认值为 'solid', 区别于 web 的默认值 'none'

#兼容性