在CSS3裡引入的許多新特徵中，這篇文章主要介紹了css3圖片邊框border-image的用法,具有一定的參考價值，有興趣的可以了解一下
對於CSS屬性border ，相信所有的WEB開發人員都非常熟悉。我們可透過設定HTML元素的 border 的寬度、顏色、樣式，讓HTML元素表現出不同的邊框，例如雙線、虛線、圓點線。但不管你怎麼設置，這些都是一些非常原始的做法。從CSS3起，我們有了一個新的屬性： border-image ，它能讓你用漂亮的小圖片來圍繞HTML元素，以圖片邊框的形式出現。透過 border-image 屬性，我們可以製作出非常漂亮的邊框樣式。
在CSS3裡引入的許多新特徵中，例如HTML5中新型input類型, 中文字體(web font) ,placeholder等，都很實用，也很流行，而且我們之前也舉了一個非常漂亮的border-image 的例子，但網路上使用圖片邊框border-image 的還是很少，我想主要是因為谷歌瀏覽器和火狐瀏覽器很早就支援它們了，而IE11才支援這種語法。
圖片邊框border-image 的語法
<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
登入後複製
這些語法描述看起來非常的枯燥，每個人都喜歡看實例，這樣最容易理解，下面我們就來將幾個實例。
圖片邊框border-image 用法一：邊框圖循環平鋪(repeat)
這種情況下，邊框圖圖片將會依次平鋪，填滿邊框區域。
<p id="repeat">图片将会循环贴满边框区域</p>
登入後複製
#repeat {
border: 15px solid transparent;
padding: 10px 20px;
-moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
border-image:url("/files/4127/border.png") 30 30 repeat;
}登入後複製
#實例示範1：
圖片邊框border-image 用法二：邊框圖自適應循環平鋪(round)
大家也許看到了，上面的圖片邊框雖然很漂亮，但有個瑕疵，就是當元素寬度或高度不是邊框圖的整數倍時，最後一個/第一張圖片不能完成顯示，會被遮擋一部分，這樣看起來就很不美觀。 CSS3的設計者已經考慮到了這個問題，使用 round 屬性值，就能避免這種情況。 round 的作用是邊框圖進行稍微的調整，來確保每張圖片都能完成顯示，增加了觀賞性。
<p id="round">图片将会贴满边框区域</p>
登入後複製
#round {
border: 15px solid transparent;
padding: 10px 20px;
-moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
border-image:url("/files/4127/border.png") 30 30 round;
}登入後複製
#實例示範2
圖片邊框border-image 用法三：邊框圖拉伸平鋪(stretch)
'stretch'就是拉伸，將小圖片拉長來填滿邊框區域，並不循環，很顯然，這樣邊框圖會變形。
<p id="stretch">图片将会拉伸贴满边框区域.</p>
登入後複製
#stretch {
border: 15px solid transparent;
padding: 10px 20px;
-moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
border-image:url("/files/4127/border.png") 30 30 stretch;
}登入後複製
#實例示範3
##很顯然，
border-image 第一種用法應該是不常用的，因為有時候它會導致邊框有殘缺的感覺。而第二種和第三種用法各有千秋，是各自不同的美。這裡使用的邊框圖其實很簡單。精巧的美工能做出更漂亮的邊框圖，能呈現出讓人讚嘆的效果，就比如之前的文章裡的一個例子，下面再次拿出來給大家看看。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
利用CSS3的border-radius實現繪製太極及愛心的圖案
CSS3中@keyframes動畫的實作
關於CSS banner圖片響應式居中顯示的方法
以上是關於css3圖片邊框border-image的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
