CSS3的border break是CSS3中的一個新特性,通過這個特性可以實現在元素的邊框處插入一個或多個間隔,從而使得邊框呈現斷開的效果。這個特性可以被用來實現一些非常有趣的設計效果,比如各種分割線、陰影效果等。
// 用CSS3實現一個中空的邊框 .border-break { border-style: solid; border-width: 1px; border-image-source: linear-gradient(to bottom, #000, #000), linear-gradient(to right, #000, #000), linear-gradient(to top, #000, #000), linear-gradient(to left, #000, #000); border-image-slice: 1 1 1 1 fill; border-image-width: 10px; }
我們希望在一個邊框的四個方向插入一個10px高聳的間隔,這里的border-image-source屬性聲明了四個方向的間隔的顏色值,而border-image-slice屬性則控制了這些間隔的大小。border-image-width屬性則規定了間隔的寬度。更多關于CSS3的border break的用法可以參考相關文獻。