border-top-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
尝试一下
border-top-style: none; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: groove; border-top-style: inset; <section id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> #example-element { background-color: #eee; color: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } body { background-color: #fff; } 备注：此规范并未定义不同样式的边框边角处如何连接。
语法
css
/* Keyword values */ 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; /* Global values */ border-top-style: inherit; border-top-style: initial; border-top-style: unset; 选取以上可用关键字之一作为 border-style 的 border-top-style 属性的值。
形式语法
border-top-style =
<line-style>
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
示例
HTML
html
<table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> CSS
css
/* Define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 { border-top-style: none; } .b2 { border-top-style: hidden; } .b3 { border-top-style: dotted; } .b4 { border-top-style: dashed; } .b5 { border-top-style: solid; } .b6 { border-top-style: double; } .b7 { border-top-style: groove; } .b8 { border-top-style: ridge; } .b9 { border-top-style: inset; } .b10 { border-top-style: outset; } 输出结果
规范
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-style |
| 初始值 | none |
|---|---|
| 适用元素 | 所有元素. It also applies to ::first-letter. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| 动画类型 | 离散值 |
浏览器兼容性
参见
- The other style-related border properties:
border-left-style,border-right-style,border-bottom-style, andborder-style. - The other top-border-related properties:
border-top,border-top-color, andborder-top-width.