8000 opti: 调整 border-image-source 的参考描述 · webcoding/css-handbook@bb2f789 · GitHub
[go: up one dir, main page]
Skip to content

Commit bb2f789

Browse files
doyoedoyoe
committed
opti: 调整 border-image-source 的参考描述
1 parent c3562bb commit bb2f789

File tree

2 files changed

+26
-3
lines changed

2 files changed

+26
-3
lines changed

‎properties/backgrounds/border-image-source.htm

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,29 @@ <h2 class="tit">说明：</h2>
7676
<div class="cont">
7777
<strong>定义元素边框样式所使用的图像。</strong>
7878
<ul>
79-
<li>指定一个图像用来替代<a href="border-style.htm" class="g-property">border-style</a>所定义的边框样式。当<a href="border-image.htm" class="g-property">border-image</a>为<code class="g-value">none</code>或图像不可见时，将会重新显示<code class="g-property">border-style</code>所定义的边框样式效果。</li>
79+
<li>指定一个图像用来替代<a href="border-style.htm" class="g-property">border-style</a>所定义的边框样式。当<a href="border-image.htm" class="g-property">border-image</a>为<code class="g-value">none</code>或图像不可见时，将会显示<code class="g-property">border-style</code>所定义的边框样式效果。</li>
80+
<li>
81+
<p>除了直接使用图片来作为边框样式外，还可以绘制渐变来作为边框样式。</p>
82+
<div class="gquote">
83+
<p class="gquote-tit"><strong>使用渐变绘制作为边框样式示例：</strong></p>
84+
<div class="gquote-cont">
85+
<style>
86+
.img {
87+
width: 100px;
88+
padding: 20px;
89+
border: 10px solid;
90+
border-image: linear-gradient(red, yellow) 10;
91+
}
92+
</style>
93+
<div class="img">渐变边框效果</div>
94+
<blockquote class="code"><code><xmp>.test {
95+
border: 10px solid;
96+
border-image: linear-gradient(red, yellow) 10;
97+
}</xmp></code></blockquote>
98+
</div>
99+
<p class="gquote-info">在这个例子中，绘制了一个线性渐变作为图像来替代边框样式，我们得到了一个渐变的边框效果。</p>
100+
</div>
101+
</li>
80102
<li>对应的脚本特性为<strong>borderImageSource</strong>。</li>
81103
</ul>
82104
</div>

‎properties/backgrounds/border-image.htm

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,9 @@ <h2 class="tit">说明：</h2>
8282
<div class="cont">
8383
<strong>简写属性。定义将图像应用到元素的边框上</strong>
8484
<ul>
85-
<li>使用图像替代<a href="border-style.htm" class="g-property">border-style</a>去定义边框样式。当<code class="g-property">border-image</code>为<code class="g-value">none</code>或图像不可见时，将会显示<a href="border-style.htm" class="g-property">border-style</a>所定义的边框样式效果。
86-
<div class="gquote">
85+
<li>
86+
<p>使用图像替代<a href="border-style.htm" class="g-property">border-style</a>去定义边框样式。当<code class="g-property">border-image</code>为<code class="g-value">none</code>或图像不可见时，将会显示<a href="border-style.htm" class="g-property">border-style</a>所定义的边框样式效果。</p>
87+
<div class="gquote">
8788
<p class="gquote-tit"><strong>示例：</strong></p>
8889
<blockquote class="gquote-cont"><code><xmp>.test {
8990
border: 10px solid gray;

0 commit comments

Comments
 (0)
0