--- title: '-webkit-border-before' slug: Web/CSS/-webkit-border-before tags: - '-webkit-border-before' - CSS - 'CSS:WebKit Extensions' - CSS属性 - Reference - 非标准 translation_of: Web/CSS/-webkit-border-before --- <div>{{CSSRef}}{{Non-standard_header}}</div> <p><strong><code>-webkit-border-before</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 属性 是一种用于简写的属性。它用于在样式表的单个位置设置各个起始边框属性值。</p> <pre class="brush:css no-line-numbers">/* Border values */ -webkit-border-before: 1px; -webkit-border-before: 2px dotted; -webkit-border-before: medium dashed blue; /* Global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; </pre> <p><code>-webkit-border-before</code> 可以使用以下一个或多个值:</p> <ol> <li>{{cssxref("-webkit-border-before-width")}}</li> <li>{{cssxref("-webkit-border-before-style")}}</li> <li>{{cssxref("-webkit-border-before-color")}}.</li> </ol> <p>它根据元素的书写模式、方向以及文本方向映射到Border上. 对应到四个边框属性{{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}或{{cssxref("border-left")}} ,具体取决于 {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}}三个属性定义的值。</p> <p>这个属性和 {{cssxref("-webkit-border-after")}}、{{cssxref("-webkit-border-start")}}、{{cssxref("-webkit-border-end")}}三个属性用来定义元素的边界。</p> <p>此属性在相关标准上的命名为 {{cssxref("border-block-start")}}.</p> <p>{{cssinfo}}</p> <h2 id="语法">语法</h2> <h3 id="可选择的值">可选择的值</h3> <p>按以下顺序,一个或多个值</p> <dl> <dt><code><'border-width'></code></dt> <dd>参考 {{cssxref("border-width")}}</dd> <dt><code><'border-style'></code></dt> <dd>参考 {{cssxref("border-style")}}</dd> <dt><code><'color'></code></dt> <dd>参考 {{cssxref("color")}}</dd> </dl> <h3 id="Formal_syntax">Formal syntax</h3> {{csssyntax}} <h2 id="示例">示例</h2> <h3 id="HTML">HTML</h3> <pre class="brush: html"><div> <p class="exampleText">Example text</p> </div> </pre> <h3 id="CSS">CSS</h3> <pre class="brush: css">div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-rl; -webkit-border-before: 5px dashed blue; }</pre> <p>{{EmbedLiveSample("Example", 140, 140)}}</p> <h2 id="规范">规范</h2> <p>尽管它和 {{cssxref("border-block-start")}} 属性有关,但现在并不存在与任何一标准规范。</p> <h2 id="兼容性">兼容性</h2> <p>{{Compat("css.properties.-webkit-border-before")}}</p> <h2 id="参考">参考</h2> <ul> <li>{{cssxref("border-block-start")}}</li> <li>The mapped physical properties: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, and {{cssxref("border-left")}}</li> <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> </ul>