圖片邊框

原文出處：http://www.w3cplus.com/css3/css-secrets/continuous-image-borders.html

問題

有時候，我們想將一些圖案或圖片添加為邊框，而不是背景。比如，在下圖中所示的元素就擁有一個裝飾性的邊框，邊框內(nèi)是一個被限制在邊框區(qū)域的圖片。此外，我們還希望圖片可以覆蓋整個邊框區(qū)域。那么我們怎樣使用 CSS 達到這一目的呢？

圖注：圖片被用來裝飾各種高度的邊框

此時，也許在你的內(nèi)心會響起一個響亮的聲音：“border-image，border-image，我們可以使用?border-image，它可以完美的解決這個問題！”年輕人，做事不要太急躁。讓我們重新回憶一下?border-image?的解析機制：它實際上將背景分成了九塊，然后分別將各個塊作用到了元素的邊角上。下圖就是一個視覺原理圖。

圖注：border-image?的快速入門。上面：分割后的圖片；虛線框內(nèi)的就是分割后的碎片;中間：border-image: 33.34% url(...) stretch;?下面:?border-image: 33.34% url(...) round;,在線示例鏈接

那我們是否可以將圖片切分成塊，然后使用?border-image?模擬出下圖這樣的效果呢？

實際上，即使我們精確計算出了元素的尺寸和邊框?qū)挾?，仍然無法達到自動適配多種尺寸的目的。問題的核心就是，我們并不是讓邊角具有某種特定的圖形，而且即使添加上了圖形，當元素尺寸變化時，圖形也會發(fā)生形變。如果你稍微嘗試一下，就會理解使用border-image?是無法實現(xiàn)效果的，那么我們應(yīng)該怎么辦呢？

解決這個問題最簡單的方法就是使用兩個 HTML 標簽：一個標簽使用目標圖片作為北京，兩一個使用白色作為背景并覆蓋在前一個標簽上面：

<div class="something-meaningful">
    <div>
        I have a nice stone art border,
        don’t I look pretty?
    </div>
</div>

.something-meaningful {
    background: url(stone-art.jpg);
    background-size: cover;
    padding: 1em;
}
.something-meaningful > div {
    background: white;
    padding: 1em;
}

這種方法確實實現(xiàn)了下圖的效果：

但是它卻需要添加額外的 HTML 標簽。這只能算是一種折中的辦法：它不僅僅混合了表現(xiàn)和樣式，而是在某些情況下必須修改 HTML 結(jié)構(gòu)。那么我們是否可以只用一層標簽就實現(xiàn)這個效果呢？

解決方案

值得慶幸的是，CSS 的漸變以及在?Backgrounds & Borders Level 3?中擴展后的?background?屬性可以幫助我們實現(xiàn)這一個效果，而且是只用一個標簽。這種方法的核心就是使用純色覆蓋背景圖片。不過，為了讓第二章圖片裝飾到邊框上，我們需要為backgroud-clip?屬性配置不同的屬性值。最后一件事就是讓最底下的圖層只有一種顏色，所以我們需要通過 CSS 漸變模擬一個純白色背景。

我們最初實現(xiàn)這個方法的代碼就像下面一樣：

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
            url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;

圖注：第一次的嘗試非常接近理想效果。

正如上圖所示，效果非常接近我們的目標了，唯一的不足是多了一些重復的部分。其中的原因就是?backgroud-origin?屬性的默認值為?padding-box，因此，圖片會定位到內(nèi)邊距盒模型的左上角，剩余的部分就會不斷平鋪這一圖片。為了矯正這一效果，我們需要將?background-origin?的屬性值修改為?border-box：

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
            url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

這些新屬性也可以統(tǒng)一使用?background?簡寫語法來聲明，從而讓我們的代碼更加簡潔優(yōu)雅：

padding: 1em;
border: 1em solid transparent;
background:
    linear-gradient(white, white) padding-box,
    url(stone-art.jpg) border-box 0 / cover;

當然，我們也可以將這一技巧應(yīng)用到和漸變相關(guān)的背景圖案上。比如，看一看下面的這些代碼，我們可以用它來生成信封風格的邊框：

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg,
              red 0, red 12.5%,
              transparent 0, transparent 25%,
              #58a 0, #58a 37.5%,
              transparent 0, transparent 50%)
0 / 5em 5em;

最終結(jié)果如圖所示：

圖注：我們實現(xiàn)的懷舊信封邊框

現(xiàn)在，你可以使用?background-size?隨意修改條紋的寬度，也可以使用?border?隨意修改邊框的寬度。不同于前一個示例，這種效果是可以使用?border-image?來實現(xiàn)的：

padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,
                   red 0, red 1em,
                   transparent 0, transparent 2em,
                   #58a 0, #58a 3em,
                   transparent 0, transparent 4em);

不過，使用?border-image?會遇到幾個問題：

• 每次修改?border-width?的時候，同時需要修改?border-image-slice
• 因為不能在?border-image-slice?中使用類似?em?的單位，所以我們只能對邊框?qū)挾仁褂孟袼貑挝?/li>
• 條紋的寬度需要硬編碼到顏色過渡點上，那么當需求變化時就需要修改四個地方的代碼

這種技巧的另一種有趣應(yīng)用就是創(chuàng)建一個類似選區(qū)的邊框（marching ants borders）。選區(qū)型邊框（譯者：之所以稱之為選區(qū)型，是因為效果非常類似 ps 中選區(qū)邊框的效果，更容易理解）是虛線邊框，而且虛線是實時滾動的，非常類似行進中的螞蟻（當然，這需要一定的想象力將虛線想象為螞蟻）。這在 GUI 中幾乎是不可想象的效果。圖像編輯軟件通常使用這種邊框來表示這是一塊被選中的區(qū)域，簡稱選區(qū)。

圖注：選區(qū)型邊框在 Adobe Photoshop 中被用來標志被選中的地方

為了創(chuàng)建這種邊框，我們將要使用前面創(chuàng)建信封邊框的技巧。首先是將條紋更改為黑白兩色，并且將邊框調(diào)整為?1px?的寬度（你注意到現(xiàn)在條紋是怎樣變化為虛線邊框的了吧？），然后適當修改一個?background-size，最后為?background-size?添加動畫效果（從初始值增加到?100%）：

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

現(xiàn)在，你可以從下圖中看到一個靜態(tài)的效果。

圖注：在紙上顯示選區(qū)型邊框是不可能的，可以訪問在線示例進行查看——非常有意思！

顯然，這種技巧不僅僅對選區(qū)型邊框有用，只需修改一下邊框顏色和虛線之間的間距，就可以用來創(chuàng)建各種自定義的虛線邊框。

目前，如果想要使用?border-image?屬性實現(xiàn)類似的效果，那么就只能使用?border-image-source?添加 GIF 來模擬了，詳情見?Marching ants animated selection rectangle in CSS。當瀏覽器廣泛支持漸變效果之后，我們就可以用漸變來創(chuàng)建這種效果了，而且代碼會更加簡練優(yōu)雅。

圖注：頂部剪切過得邊框，用來模擬傳統(tǒng)書籍中的腳注

不過，border-image?也是非常強大的屬性，甚至有時比漸變更強大。比如，假設(shè)我們需要一個裁剪過的頂部邊框，就像常見的腳注樣式。那么只需要使用?border-image和垂直漸變就可以實現(xiàn)，其中裁剪的長度可以硬編碼實現(xiàn)。邊框的寬度則有?border-width?來控制。代碼就像是這樣：

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

最終結(jié)果如上圖所示。此外，因為我們在這里使用?em?單位，所以整體效果就能隨字體大小而變化；因為使用了currentColor，所以它也可以隨字體顏色而改變顏色。

總結(jié)

在CSS2.1的時代要實現(xiàn)圖片邊框效果是一種奢侈的想法，但在CSS3中雖然增加了border-image屬性實現(xiàn)圖片邊框，但依舊受到諸多的限制性，其中最大的限制就是瀏覽器對其支持度。在這一節(jié)中，我們介紹了使用多背景，以及配合background-clip、background-origin屬性模擬出圖片邊框效果。