diff options
Diffstat (limited to 'files/zh-cn/web/css/border-style/index.html')
| -rw-r--r-- | files/zh-cn/web/css/border-style/index.html | 240 |
1 files changed, 240 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/border-style/index.html b/files/zh-cn/web/css/border-style/index.html new file mode 100644 index 0000000000..af0b366697 --- /dev/null +++ b/files/zh-cn/web/css/border-style/index.html @@ -0,0 +1,240 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS 属性 + - CSS 边框 + - Web + - 参考 + - 布局 +translation_of: Web/CSS/border-style +--- +<h2 id="概述">概述</h2> + +<p>{{ CSSRef("CSS Borders") }}</p> + +<p><code>border-style</code> 是一个 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 简写属性，用来设定元素所有边框的样式。</p> + +<div class="note"><strong>注意：</strong><code>border-style</code> 默认值是 <code>none</code>，这意味着如果您只修改 {{ Cssxref("border-width") }} 和 {{ Cssxref("border-color") }} 是不会出现边框的。</div> + + + +<p>{{EmbedInteractiveExample("pages/css/border-style.html")}}</p> + +<div class="hidden"> +<p>The source for this interactiv example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + + + +<h2 id="语法">语法</h2> + +<pre class="brush: css">/* Apply to all four sides */ +border-style: dashed; + +/* horizontal | vertical */ +border-style: dotted solid; + +/* top | horizontal | bottom */ +border-style: hidden double dashed; + +/* top | right | bottom | left */ +border-style: none solid dotted dashed; + +/* Global values */ +border-style: inherit; +border-style: initial; +border-style: unset; +</pre> + +<h3 id="取值">取值</h3> + +<dl> + <dt><code><br-style></code></dt> + <dd>关键字用于描述边框样式。它可以有以下取值： + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>none</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">和关键字 <code>hidden</code> 类似，不显示边框。在这种情况下，如果没有设定背景图片，{{ cssxref("border-width") }} 计算后的值将是 <code>0</code>，即使先前已经指定过它的值。在单元格边框重叠情况下，<code>none</code> 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>hidden</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">和关键字 <code>none</code> 类似，不显示边框。<span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">在这种情况下，如果没有设定背景图片，{{ cssxref("border-width") }} 计算后的值将是 </span><code style="font-style: normal; font-size: 13.63636302948px; line-height: 19.0909080505371px;">0</code><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">，即使先前已经指定过它的值。在单元格边框重叠情况下，</span><code>hidden</code> 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dotted</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">显示为一系列圆点。标准中没有定义两点之间的间隔大小，<span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">视不同实现而定</span>。圆点半径是 {{ cssxref("border-width") }} 计算值的一半。</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dashed</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>solid</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">显示为一条实线。</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>double</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">显示为一条双实线，宽度是 {{ cssxref("border-width") }} 。</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>groove</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">显示为有雕刻效果的边框，样式与 <code>ridge</code> 相反。</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>ridge</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">显示为有浮雕效果的边框，样式与 <code>groove</code> 相反。</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>inset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">显示为有陷入效果的边框，样式与 <code>outset</code> 相反。当它指定到 {{ cssxref("border-collapse") }} 为 <code>collapsed</code> 的单元格时，会显示为 <code>groove</code> 的样式。</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>outset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;"> + <p>显示为有突出效果的边框，样式与 <code>inset</code> 相反。当它指定到 {{ cssxref("border-collapse") }} 为 <code>collapsed</code> 的单元格时，会显示为 <code>ridge</code> 的样式。</p> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="正式语法">正式语法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="示例">示例</h2> + +<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">包含所有属性取值的表格</h3> + +<p>以下是一个所有取值的例子</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* 定义表格外观 */ +table { + border-width: 3px; + background-color: #52E396; +} +tr, td { + padding: 2px; +} + +/* border-style 示例 */ +.b1 {border-style:none;} +.b2 {border-style:hidden;} +.b3 {border-style:dotted;} +.b4 {border-style:dashed;} +.b5 {border-style:solid;} +.b6 {border-style:double;} +.b7 {border-style:groove;} +.b8 {border-style:ridge;} +.b9 {border-style:inset;} +.b10 {border-style:outset;}</pre> + +<h4 id="输出">输出</h4> + +<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table" style="font-family: lucida grande,lucida sans unicode,dejavu sans,lucida,arial,helvetica,sans-serif; font-size: 14px; font-weight: normal; line-height: 1.572;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No change</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Added the 2-, 3- and 4-value syntaxes</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("css.properties.border-style")}}</p> + + + +<div id="compat-mobile"></div> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>和边框有关的 CSS 简写属性：{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li> +</ul> |