此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
-webkit-border-before
非标准: 该特性尚未标准化。我们不建议在生产环境中使用非标准特性,因为它们在浏览器中的支持有限,且可能发生变化或被移除。不过,在没有标准选项的特定情况下,它们可以作为合适的替代方案。
CSS 属性 -webkit-border-before 是一个用于在样式表中统一设置逻辑块起始边框各属性值的简写属性。
组成属性
该属性是以下 CSS 属性的简写:
语法
css
/* 边框值 */
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;
/* 全局值 */
-webkit-border-before: inherit;
-webkit-border-before: initial;
-webkit-border-before: revert;
-webkit-border-before: revert-layer;
-webkit-border-before: unset;
值
以下一个或多个,顺序不限:
描述
-webkit-border-before 属性根据元素的书写模式、方向性和文本方向映射到物理边框。它对应于 border-top、border-right、border-bottom 或 border-left 属性,具体取决于为 writing-mode、direction 和 text-orientation 定义的值。
它与 -webkit-border-after、-webkit-border-start 和 -webkit-border-end(这些属性定义了元素的其他边框)相关。
该属性的标准跟踪等效属性是 border-block-start。
形式定义
| 初始值 | 该简写所对应的每个属性:
|
|---|---|
| 适用元素 | 所有元素 |
| 是否是继承属性 | 是 |
| Percentages | 该简写所对应的每个属性:
|
| 计算值 | 该简写所对应的每个属性:
|
| 动画类型 | 离散值 |
形式语法
-webkit-border-before =
<'border-width'> ||
<'border-style'> ||
<color>
<border-width> =
<'border-top-width'> {1,4}
<border-style> =
<'border-top-style'> {1,4}
<border-top-width> =
<line-width>
<border-top-style> =
<line-style>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
示例
对垂直文本应用边框
HTML
html
<div>
<p class="exampleText">示例文本</p>
</div>
CSS
css
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
-webkit-border-before: 5px dashed blue;
}
结果
[フレーム]
规范
不属于任何标准,但它与标准跟踪的 border-block-start 属性相关。
浏览器兼容性
Loading...