<p><strong>1.半透明边框</strong></p>    <p><strong>问题:</strong></p>    <p>如果我们要为一个容器设置红色背景和一道黑色半透明边框，我们可能会这样写:</p>    <pre>  <code class="language-css">border: 20px solid rgba(0,0,0,0.5);  background: red;</code></pre>    <p>但是效果却是这样的（图1-1.png）；我们的半透明颜色怎么没有实现半透明边框？</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2cdb0892ff107f7656a464f332915534.png"></p>    <p style="text-align:center">图1-1.png</p>    <p>解决方案：</p>    <p>我们可以通过background-clip属性来调整上面的默认行为，把它是值设为padding-box,然后就出现了我们想要的效果（图1-2.png）；</p>    <pre>  <code class="language-css">border: 20px solid rgba(0,0,0,0.5);  background: red;  background-clip: padding-box;</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7cb729d03cfc75ee116839abf63c82f0.png"></p>    <p style="text-align:center">图1-2.png</p>    <p><strong>2.background-clip</strong></p>    <p><em>既然用到了background-clip属性，那我们就来看看这个属性吧;</em></p>    <p><strong>background-clip:</strong></p>    <p>设置元素的背景（背景图片或颜色）是否延伸到边框下面。</p>    <table>     <thead>      <tr>       <th>值（values ）</th>       <th>说明</th>      </tr>     </thead>     <tbody>      <tr>       <td>border-box</td>       <td><em>默认初始值</em> ，背景延伸到边框外沿（但是在边框之下）</td>      </tr>      <tr>       <td>padding-box</td>       <td>边框下面没有背景，即背景延伸到内边距外沿</td>      </tr>      <tr>       <td>content-box</td>       <td>背景裁剪到内容区 (content-box) 外沿</td>      </tr>      <tr>       <td>text</td>       <td><em>实验API</em> ，背景裁剪到前景文本（ foreground text）内。</td>      </tr>     </tbody>    </table>    <p><strong>示例</strong></p>    <p>CSS content</p>    <pre>  <code class="language-css">span {     border: 10px blue;     border-style: dotted double;     margin: 1em;     padding: 2em;     background: #F8D575;  }  .border-box { background-clip: border-box; }  .padding-box { background-clip: padding-box; }  .content-box { background-clip: content-box; }  .text { background-clip: text; }</code></pre>    <p>HTML content</p>    <pre>  <code class="language-css"><span class="border-box">border-box</span>  <span class="padding-box">padding-box</span>  <span class="content-box">content-box</span>  <span class="text">text</span></code></pre>    <p>效果：（图2-1.png）</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/254e9b97220103b2ca264ad12b6c8639.png"></p>    <p style="text-align:center">图2-1.png</p>    <p><strong>3.border-style</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fd843e8a7553142d2ed2d3ac1208362f.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/38b6eb26f5bfafbeb33e52dfe1cf742c.png"></p>    <p><strong>4.border-image</strong></p>    <p>初始值：</p>    <ul>     <li>border-image-source: none</li>     <li>border-image-slice: 100%</li>     <li>border-image-width: 1</li>     <li>border-image-outset: 0s</li>     <li>border-image-repeat: stretch</li>    </ul>    <p><strong>4.1 border-image-source: none | <image></strong></p>    <p>where</p>    <p><image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient></p>    <p>where</p>    <p><image()> = image([ [ <image> | <string> ]? , <color>? ]!)<br> <image-set()> = image-set(<image-set-option>#)<br> <element()> = element( <id-selecter> )<br> <cross-fade()> = cross-fade(<cf-mixing-image>,<cf-final-image>?)<br> <gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()></p>    <p><em>Gradient示例：</em></p>    <p><linear-gradient()> = linear-gradient( [<angle> | to <side-or-corner>]?, <color-stop-list>)</p>    <p>CSS content</p>    <pre>  <code class="language-css">.gradient {       border: 30px solid;      border-image-source: linear-gradient(to right, red, green, blue);      /*border-image-source: linear-gradient(90deg, red, green, blue);*/      border-image-slice: 10;      padding: 20px;  }</code></pre>    <p>HTML content</p>    <pre>  <code class="language-css"><div class="gradient">The image is stretched to fill the area.</div></code></pre>    <p>效果：（图4-1.png）</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/29349505a347def04d9bec4a3ffa640e.png"></p>    <p style="text-align:center">图4-1.png</p>    <p>4.2 border-image-slice: [ <number> | <percentage> ]{1,4}&& fill?</p>    <p>这个 border-imge-slice 属性传入1~4个参数（number没有单位专指像素或百分比值）将图片分割成9个部分,1,2,3,4四个区块是不会拉伸,不会平铺，称之为盲区，5,6,7,8四个区块可以通过 border-image-repeat 来控制拉伸平铺和重复（ stretch:默认值,拉伸; repeat:平铺; round:整数次平铺; ），第9区块不显示，传入参数 fill 则显示第9区块，分割情况如下图（图4-2.png && 图2-3.png）:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/afdaee6e6b47d1f1214e3f9a69ad8f4c.png"></p>    <p style="text-align:center">图4-2.png</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/195a60508a15462a769e68ff48fd6fbf.png"></p>    <p style="text-align:center">图4-3.png</p>    <p>我们通过上面这张图片（81px^81px）来看传入不同个数的参数是如何分割这张图片的；</p>    <p><strong>1个参数</strong></p>    <pre>  <code class="language-css">/* border-image-slice: slice */  border-image-slice: 27;   border: 30px solid transparent;  padding: 20px;  border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/42caa7883dc3d70f2153131d7db2ecdb.png"></p>    <p style="text-align:center">图4-4.png</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4576dd007a317108d0aeb94aacb90d8a.png"></p>    <p style="text-align:center">图4-5.png(效果图)</p>    <p><strong>2个参数（参考图4-3.png）</strong></p>    <pre>  <code class="language-css">/* border-image-slice: vertical horizontal */  border-image-slice: 40 40.5;   border: 30px solid transparent;  padding: 20px;  border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cfd169d36bcd05105af392f938ba0a20.png"></p>    <p style="text-align:center">图4-6.png</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2e4cd69c3ba2d1e056d4ea5e64a03229.png"></p>    <p style="text-align:center">图4-7.png(效果图)</p>    <p><strong>3个参数</strong></p>    <pre>  <code class="language-css">/* border-image-slice: top horizontal bottom */  border-image-slice: 27 40 27;   border: 30px solid transparent;  padding: 20px;  border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/26d9e59a796496ce5e1a3d5393e44087.png"></p>    <p style="text-align:center">图4-8.png（效果图）</p>    <p><strong>4个参数(参考图4-2.png)</strong></p>    <pre>  <code class="language-css">/* border-image-slice: top right bottom left */  border-image-slice: 27 40 27 27;  border: 30px solid transparent;  padding: 20px;  border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1a56d3fdad273bf521af76f8547d3b53.png"></p>    <p style="text-align:center">图4-9.png（效果图）</p>    <p><strong>4.3 border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}</strong></p>    <p>语法：</p>    <pre>  <code class="language-css">border-image-width: all                        /* One-value syntax */         E.g. border-image-width: 3;  border-image-width: vertical horizontal        /* Two-value syntax */    E.g. border-image-width: 2em 3em;  border-image-width: top horizontal bottom      /* Three-value syntax */      E.g. border-image-width: 5% 15% 10%;  border-image-width: top right bottom left      /* Four-value syntax */    E.g. border-image-width: 5% 2em 10% auto;</code></pre>    <p>设置边框图片的width，如果超出了设置的border-width,会向内扩展；查看下方示例，比较（图4-10.png && 图4-11.png）；</p>    <p>示例：</p>    <pre>  <code class="language-css">border: 30px solid transparent;  padding: 20px;  border-image-source: url("https://mdn.mozillademos.org/files/4127/border.png");  border-image-slice: 27;</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ee4e4397648719826474a31e670f5bb5.png"></p>    <p style="text-align:center">图4-10.png</p>    <pre>  <code class="language-css">border: 30px solid transparent;  padding: 20px;  border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));  border-image-slice: 27;  border-image-width: 1 2 1 1;</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/810e67fb1ea2655702344ec688de9637.png"></p>    <p style="text-align:center">图4-11.png</p>    <p><strong>4.4 border-image-outset: [ <length> | <number> ]{1,4}</strong></p>    <p>语法：</p>    <pre>  <code class="language-css">/* border-image-outset: sides */  border-image-outset: 30%;  /* border-image-outset:vertical horizontal */  border-image-outset: 10% 30%;  /* border-image-outset: top horizontal bottom */  border-image-outset: 30px 30% 45px;  /* border-image-outset:top right bottom left  */  border-image-outset: 7px 12px 14px 5px;</code></pre>    <p>效果是将边框图片延伸到盒子外面，查看下放示例，比较（图4-12.png && 图4-13.png）；</p>    <p>示例:</p>    <pre>  <code class="language-css">border: 30px solid transparent;   padding: 20px;   border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));   border-image-slice: 27;   margin: 60px;</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/810e67fb1ea2655702344ec688de9637.png"></p>    <p style="text-align:center">图4-12.png</p>    <pre>  <code class="language-css">border: 30px solid transparent;  padding: 20px;  border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));  border-image-slice: 27;  margin: 60px;  border-image-outset: 2 1 1 1;</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/42920f8f685c003ec1fd5a0824bcf3d7.png"></p>    <p style="text-align:center">图4-13.png</p>    <p>4.4 border-image-repeat: [ stretch | repeat | round ]{1,2}</p>    <table>     <thead>      <tr>       <th>值（value）</th>       <th>说明</th>      </tr>     </thead>     <tbody>      <tr>       <td>stretch</td>       <td><em>默认初始值</em> ，；拉伸</td>      </tr>      <tr>       <td>repeat</td>       <td>平铺</td>      </tr>      <tr>       <td>round</td>       <td>整数次平铺</td>      </tr>     </tbody>    </table>    <p>语法：</p>    <pre>  <code class="language-css">border-image-repeat: type                      /* One-value syntax */         E.g. border-image-value: stretch;  border-image-repeat: horizontal vertical       /* Two-value syntax */         E.g. border-image-width: round space;</code></pre>    <p> </p>    <p> </p>    <p>来自：http://www.jianshu.com/p/d5b16170526c</p>    <p> </p>