diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/css/border-image-outset/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/css/border-image-outset/index.html')
-rw-r--r-- | files/zh-cn/web/css/border-image-outset/index.html | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/border-image-outset/index.html b/files/zh-cn/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..cbae437d1a --- /dev/null +++ b/files/zh-cn/web/css/border-image-outset/index.html @@ -0,0 +1,127 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-outset +--- +<div>{{CSSRef("CSS Borders")}}</div> + +<h2 id="概述">概述</h2> + +<p><code>border-image-outset属性定义边框图像可超出边框盒的大小。</code></p> + +<div>{{cssinfo}}</div> + +<h2 id="语法">语法</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-image-outset")}} +</pre> + +<pre>/* border-image-outset: <em>sides</em> */ +border-image-outset: 30%; + +/* border-image-outset:<em>垂直 水平</em> */ +border-image-outset: 10% 30%; + +/* border-image-outset: 顶 水平 底<em> */</em> +border-image-outset: 30px 30% 45px; + +/* border-image-outset:<em>顶 右 底 左</em> <em> */</em> +border-image-outset: 7px 12px 14px 5px; + +border-image-repeat: inherit; +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><em>sides</em></dt> + <dd>边框图像在四个方向超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量。</dd> + <dt><em>horizontal</em></dt> + <dd>边框图像在水平方向(左和右)超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.</dd> + <dt><em>vertical</em></dt> + <dd>边框图像在垂直方向(上和下)超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.</dd> + <dt><em>top</em></dt> + <dd>边框图像在上方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.</dd> + <dt><em>bottom</em></dt> + <dd>边框图像在下方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.</dd> + <dt><em>right</em></dt> + <dd>边框图像在右方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.</dd> + <dt><em>left</em></dt> + <dd>边框图像在左方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.</dd> + <dt><code>inherit</code></dt> + <dd>四个方向的值都继承于父元素的该属性计算后值。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>首次定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>15.0</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>11</td> + <td>15</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> |