CSS3屬性-設置圖片邊框樣式信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》前端技術開發知識儲備邊框圖片設置1邊框圖片切片2邊框圖片寬度3邊框圖片外偏移5組合屬性6邊框圖片平鋪方式401設置邊框圖片前端技術開發邊框圖片設置前端技術開發01border-image-source：url(圖片路徑)設置邊框圖片源：

僅border-image-source屬性無法顯示邊框圖片效果，需要設置邊框圖片寬度。div{

border-image-source:url(img/border.png);}路徑一般使用相對路徑前端技術開發02邊框圖片寬度邊框圖片寬度設置前端技術開發02設置邊框圖片寬度：border-image-width：length|%|auto;語法說明：

length設置數值，需要單位，如：20px。%設置百分比，相對于所在元素的長度或寬度進行圖片縮放。

auto一般為元素長度或寬度（較小者）的一半。

可取1-4個值，按順時針方向表示四個方向上的邊框寬度。邊框圖片寬度設置前端技術開發02設置邊框圖片，同時設置邊框圖片寬度div{

border-image-source:url(img/border.png);

border-image-width:30px;}邊框圖片只出現在四個角位置，因此設置邊框還需要結合圖片切片屬性。前端技術開發03邊框圖片切片邊框圖片切片設置前端技術開發03border-image-slice：number|%|fill;設置邊框圖片切片：語法說明：

可使用數字1~4個值，類似border屬性設置，不要寫單位，默認像素。

可使用百分比1~4個值。fill可選項，填充元素內容，類似背景圖效果。邊框圖片切片設置前端技術開發03div{

border-image-source:url(img/border.png);

border-image-slice:33%33%;}圖片四個角固定為元素的四個角，可設置1-4個值，按順時針方向（上、右、下、左）切分成9個方格。中間的方格為透明，即不顯示。邊框圖片切片設置前端技術開發03設置圖片切片后，不同的邊框圖片寬度：div{

border-image-source:url(img/border.png);

border-image-slice:33%33%;

border-image-width:20px;}寬度：30px寬度：20px前端技術開發04邊框圖片平鋪方式邊框圖片平鋪設置前端技術開發04設置邊框圖片重復方式：border-image-repeat：stretch|repeat|round;屬性值描述repeat取值為repeat時，表示4條邊的小方塊會不斷重復，超出元素部分將會被剪切掉。round取值為round時，表示4條邊的小方塊會鋪滿。為了鋪滿，邊框圖片會壓縮或拉伸。stretch取值為stretch時，表示4條邊的小方塊會拉伸，邊長有多長就拉多長。屬性值說明如表所示。邊框圖片平鋪設置前端技術開發04設置圖片邊框重復：div{

border-image-source:url(img/border.png);

border-image-slice:33%33%;

border-image-width:20px;

border-image-repeat:repeat;}srecthroundrepeat前端技術開發05邊框圖片外偏移邊框圖片外偏移前端技術開發05設置邊框向外偏移：border-image-outset：length|number;div{

width:200px;height:200px;background:#ccc;

border-image-source:url(img/border.png);

border-image-slice:33%33%;

border-image-width:20px;border-image-repeat:repeat;

border-image-outset:0px;}向外偏移：0向外偏移：10px前端技術開發06組合屬性邊框圖片組合屬性前端技術開發06border-image：url(border.png)30303030/20pxrepeat設置圖片路徑設置圖片切割方式和寬度border-image：圖片路徑

圖片切片方式/寬度

圖片平鋪方式;