【CSS3学习笔记】16：边框图片效果
生活随笔
收集整理的這篇文章主要介紹了
【CSS3学习笔记】16：边框图片效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通過邊框背景這個新特性可以讓我們的邊框更加豐富。
相關屬性
①border-image-source 引入圖片背景地址
②border-image-slice 切割背景圖片
(通過設置四個值來知道四個角要顯示的尺寸，在這里加入fill可以將內部填充)
③border-image-width 邊框圖片的寬度
(通過設置四個值來知道邊框四條邊的寬度。)
④border-image-repeat 邊框中邊的方案
(stretch拉伸(默認)，repeat平鋪(超過則截斷)，round平鋪(動態調整圖片大小)，space平鋪(動態調整圖片間距)。)
⑤border-image-outset 邊框背景向外擴張的范圍
(為了剛好包含住background的范圍，它個值往往就是邊框每條邊的寬度。)
⑥border-image 前面五個屬性的簡寫
邊框應使用特制的圖片，能夠分成九宮格(不一定每格大小都一樣)，如用ps制作了一張這樣的圖：
它的總大小是210px，每個格子為70px：
*測試代碼
<!DOCTYPE html> <html lang="zh-cn"> <head><title>CSS3邊框圖片效果</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style.css"> </head><body><div id="id1"><span>加入圖片邊框</span></div><br><div id="id2"><span>用百分比切割</span></div><br><div id="id3"><span>向外擴張以包含住背景</span></div><br><br><br><br><br><br><br><div id="id4"><span>設定四個邊的方案</span></div><br><div id="id5"><span>嘗試fill填充</span></div> </html> @charset "utf-8";div span{vertical-align: -200px; }#id1{text-align: center;width: 400px;height :400px;/*邊框的地址*/border-image-source: url(lzh.png);/*邊框圖像寬度，四個邊都是70px*/border-image-width: 70px;/*邊框的切割，四邊都向內切割70(px)，即每個角顯示70x70的小格，其它部分自動拉伸*/border-image-slice: 70; }#id2{text-align: center;width: 400px;height :400px;border-image-source: url(lzh.png);border-image-width: 70px;border-image-slice: 33.4%; }#id3{text-align: center;margin: 0 auto;width: 400px;height :400px;background-color: gray;border-image-source: url(lzh.png);border-image-width: 70px;border-image-slice: 33.4%;/*為了遮住背景顏色,向外擴張*/border-image-outset: 70px; }#id4{text-align: center;width: 400px;height :400px;border-image-source: url(lzh.png);border-image-width: 70px;border-image-slice: 33.4%;/*動態調整邊圖的大小以平鋪*/border-image-repeat: round; }#id5{text-align: center;width: 400px;height :400px;border-image-source: url(lzh.png);border-image-width: 70px;/*既平鋪，又填充*/border-image-slice: 33.4% fill;border-image-repeat: round; }運行結果：
另外，利用邊框圖片(border-image)，還可以做出按鈕的效果來。
總結
以上是生活随笔為你收集整理的【CSS3学习笔记】16：边框图片效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【学术】参考文献管理
- 下一篇： 使用CSS打造很有亲和力的各种web2.