css3 border-image及連續的圖像邊框

border-image

它是下面幾個值的簡寫：

border-image-source // 使用絕對或相對地址url,引入圖片

border-image-slice   //切割圖片，取值支持:<number> 或<percentage>其中number是沒有單位的，

border-image-width //邊框圖片的寬度

border-image-outset //邊框向外延伸的距離

border-image-repeat //邊框如何重復取值有： stretch | repeat | round

它的默認值是：none 100% 1 0 stretch。

none:是border-image的默認值，如果取值為none時，表示邊框無背景圖片。

 

使用 border-image 時，其將會替換掉border-style 屬性所設置的邊框樣式。

此外，規范要求使用 border-image 時邊框樣式必須存在。

 

border-image的工作原理就是九宮格伸縮法：把圖片切割成九塊，然后把他們應用到邊和角。

上面的原圖，應用到邊框上效果如下：

border:15px solid red;
border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 30 ;
 

border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 30 repeat;//增加了repeat屬性 效果如下

 

 小應用：生成老式信封的邊框樣式

border-image可以運用漸變生成類似信封邊框樣式

div {
    padding: 1em;
    border: 16px solid transparent;
    border-image: 16 repeating-linear-gradient(-45deg, red 0,red 1em,
    transparent 0,transparent 2em,blue 0,blue 3em,transparent 0,transparent 4em );
    max-width: 20em;
 }

效果圖：

 

此外，通過background和漸變生成螞蟻行軍的邊框。

@-webkit-keyframes ants { to { background-position: 100% 100% } }
 div{
   -webkit-animation: ants 12s linear infinite;     
    padding: 1em;
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;

效果圖（靜態的）：

當然，border-image還有個強大的技巧就是搭配漸變圖案：

列如，我們需要有個頂部邊框被裁切的效果類似腳注。

我們要做的就是運用border-image加上一條由漸變生成的垂直條紋，而邊框的粗細有border中的width來控制。

 

border-top:.2em solid transparent;
border-image: 100%  0 0 linear-gradient(90deg ,currentcolor 4em,transparent 0);
padding-top: .5em;