CSS 3中邊框怎麼用

標籤：預設值   height   第一個   pac   模式   高度   nbsp   背景圖片   css   

 

(1)設定邊框圖片的來源 圖片邊框預設只在四個頂點顯示

none: 無背景圖片; 
border-image-source: url(‘borderImage.png‘); 

 

(2)邊框圖片的分割 將圖片分為9塊內容, 四個頂點 四個邊框 一個中間地區

如果需要用到中間地區 添加fill屬性值 整體一張填充

該屬性規定映像的上、右、下、左側邊緣的向內位移，

如果省略第四個數值/百分比，則與第二個值相同。如果省略第三個值，則與第一個值相同。如果省略第二個值，則與第一個值相同

數值不需要給單位 (整數/百分比)

 數字:代表映像中的像素(如果是光柵映像)或向量座標(如果是向量圖)

%:相對於映像尺寸的百分比值,寬度影響水平位移 高度影響垂直位移

 border-image-slice: 27 ;

 

(3)邊框圖片的填充模式
stretch:預設值, 將邊框展開
repeat:平鋪 無限複製邊框 不論大小直接複製,位置不夠就直接修剪兩邊的圖案
round:平鋪, 適當的調整圖片的大小, 保證圖片完整顯示
space:平鋪 : 通過調整圖片的間距來完整的顯示圖片
 border-image-repeat: stretch; 

 

 

(4)邊框圖片的寬度 如果寬度大於了邊框寬度, 向內容地區擴張
如果設定auto 則採取跟border-image-slice相同的值 
 border-image-width: 30px;

 

(5)設定圖片邊框向外擴充的距離圖片距離邊框的內邊距
 border-image-outset: 30px;

 

 

(6)範圍四個角
border-radius: 30px; 四個角的弧度

30:左上 右下 50:右上 左下
border-radius: 30px 50px;

30:水平半徑 50:垂直半徑//設定一個數值就代表兩個一樣

兩個數值之間用30/50  ‘‘/‘‘分割
border-top-left-radius: 30px 50px;
border-top-right-radius: 80px 30px;

 

CSS 3中邊框怎麼用