css3不尋常設計的邊框造型

Question

我的目標是在純css中獲得邊框效果。我想問你是否有可能（或者我必須使用圖像）？我是否必須使用這種跨度屬性或大綱或其他內容？也許你知道我可以找到教程如何做到這一點？

Answer 1

另一種不使用邊框的可能性，但是純CSS是僞元素的一些古怪的工作。

例如：

p:after { 
    content: ''; 
    background-color: red; 
    position: absolute; 
    width: 20px; 
    left: 0; 
    top: -2px; 
    bottom: -2px; 
    z-index: -1; 
} 

您可以在這裏看到演示：http://jsbin.com/iduvoj/1/edit

這是你的最後一個例子的另一個演示：http://jsbin.com/igotul/1/edit

現在，這取決於幾件事情，怎麼樣你會堆疊的許多元素，無論你的段落是否可以有一個堅實的背景色等，但它有可能工作。

它也只取決於:before和:after這是相當不錯的支持：http://caniuse.com/#search=before

Answer 2

這將是棘手的。

我可以給你提供的最好的邊框是CSS border-image，它確實可以讓你設計幾乎任意的邊框設計。你可以閱讀更多關於它on MDN。

它的優點是它的設計能夠處理跨越邊界長度的圖像，並根據需要爲每個邊和角落分開圖像等，因此非常靈活。

我不會在上面鏈接的MDN頁面上給出一個例子，因爲CSS代碼本身相對簡單;你需要讓它工作的主要事情將是實際的圖像，這是你需要提供自己的東西。

但是，您將遇到的主要問題是border-image是瀏覽器支持。這是一個相對較新的CSS，一些相當現代的瀏覽器不支持它。這包括IE10。取決於你需要什麼，這可能會縮小這個解決方案。

因此，可以更好地跨瀏覽器工作的替代解決方案僅僅是將邊框定義爲背景圖像。這是相當明顯的，實際上工作得很好。如果盒子的高度可能會有很大變化，那麼您可能會遇到縮放問題，但可以通過使用多個背景圖像來避免這種情況。

希望有所幫助。