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

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

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

length設(shè)置數(shù)值，需要單位，如：20px。%設(shè)置百分比，相對于所在元素的長度或?qū)挾冗M(jìn)行圖片縮放。

auto一般為元素長度或?qū)挾龋ㄝ^小者）的一半。

可取1-4個值，按順時針方向表示四個方向上的邊框?qū)挾取＿吙驁D片寬度設(shè)置前端技術(shù)開發(fā)02設(shè)置邊框圖片，同時設(shè)置邊框圖片寬度div{

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

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

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

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

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

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

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

border-image-slice:33%33%;

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

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

border-image-slice:33%33%;

border-image-width:20px;

border-image-repeat:repeat;}srecthroundrepeat前端技術(shù)開發(fā)05邊框圖片外偏移邊框圖片外偏移前端技術(shù)開發(fā)05設(shè)置邊框向外偏移：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前端技術(shù)開發(fā)06組合屬性邊框圖片組合屬性前端技術(shù)開發(fā)06border-image：url(border.png)30303030/20pxrepeat設(shè)置圖片路徑設(shè)置圖片切割方式和寬度border-image：圖片路徑

圖片切片方式/寬度

圖片平鋪方式;