CSS3之border-image的使用

最近，我在項目開發中遇到這樣的問題。

要給這個tab的底部的藍線左右加上圓角。

然而，這個元素實際如上圖所示，只是active的時候加了個underline的類，藍線並沒有單獨的html。

若給這個span加上border-bottom-left-radius和border-bottom-right-radius也只能給藍線的下半部分加上圓角。

正當困惑時，我突然想到了CSS3的border-image屬性，也許可以解決這個問題。

然后，我查閱了相關資料，解決了上面的問題。代碼為：

.register-search .navbar__title__underline {
    padding-bottom: 0.8rem;

    border: 0.125rem solid transparent;
    -webkit-border-image:url(../images/[e-mail]) 0 0 6 0; /* Safari 5  */
    -o-border-image:url(../images/[e-mail]) 0 0 6 0; /* Opera */
    border-image:url(../images/[e-mail]) 0 0 6 0;
}

這段代碼的要點為：

1.設置border的寬度，並且設置為透明。

2.讓設計師切出設計圖的藍線(324*6)，然后用border-image引用，調好上右下左的切割位置即可。

 

這里詳細介紹下border-image。

border-image的第一個參數是邊框圖片路徑，即border-image-source。

border-image的第二個參數是border-image-slice，即可按上右下左的順序切割背景圖。

 

如圖所示，30% 35% 40% 30%即是像上圖一樣進行剪裁，裁剪所形成的矩形即為邊框。若只是單純的數字，則默認單位是px。

border-image的第三個參數是border-image-repeat。

例如，這張圖作為邊框背景圖，菱形的對角線為30px。

則

border-image: url(border.png) 30 round;

所對應的效果為

另外，

border-image: url(border.png) 30 stretch;

所對應的效果為

stretch是默認值。

於是，要實現切下來的圖位於邊框底部的效果，則上邊切0px，右邊切0px，下邊切6px，左邊切0px。即

border-image:url(../images/[e-mail]) 0 0 6 0;

這樣整張邊框圖就直接落在了邊框底部，從而實現需求。

 

雖然這段代碼在電腦和安卓手機上都能成功顯示藍線，但是在ios上不顯示藍線。

解決方法：

把border樣式拆成

border-width: 0.125rem;
border-style: solid;

即可成功顯示。