鍍金池/ 問答/HTML5  HTML/ css3 border-img的疑惑

css3 border-img的疑惑

  1. 列表項(xiàng)目

這是w3cschools的例子，30指切割背景圖片的四條線距離上右下左的距離

div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(/i/border.png) 80 80 round;    /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;        /* Opera */
border-image:url(/i/border.png) 30 30 round;
}

但當(dāng)我設(shè)置更大的slice距離的時候結(jié)果很奇怪，求解釋， 根據(jù)圖二圖片原始大小為(273)(27*3),
所以需要設(shè)置slice距離為27嗎，謝謝

div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(/i/border.png) 80 80 round;    /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;        /* Opera */
border-image:url(/i/border.png) 50 30 round;
}

clipboard.png

clipboard.png

回答
編輯回答
朕略萌

border-image繪制原理簡述
我是這樣理解的：共存在兩個九宮格，一個是邊框圖片，還有一個就是邊框本身，九個方位關(guān)系一一對應(yīng)。邊框本身的特性讓其變成了一個九宮格，四條邊框交錯，加上其圍住的區(qū)域，正好形成一個九宮格。邊框圖片則是通過圖片剪裁實(shí)現(xiàn)了九宮格。這是理解繪制原理的基礎(chǔ)。

1、調(diào)用邊框圖片
border-image的url屬性，通過相對或絕對路徑鏈接圖片。

2、邊框圖片的剪裁
border-image的數(shù)值參數(shù)剪裁邊框圖片，形成九宮格。

3、剪裁圖片填充邊框
邊框圖片被切割成9部分，以一一對應(yīng)的關(guān)系放到div邊框的九宮格中，然后再壓縮（或拉伸）至邊框（border-width或border-image-width）的寬度大小。

4、執(zhí)行重復(fù)屬性
被填充至邊框九宮格四個角落的的邊框圖片是不執(zhí)行重復(fù)屬性的。上下的九宮格執(zhí)行水平方向的重復(fù)屬性（拉伸或平鋪），左右的格子執(zhí)行垂直方向的重復(fù)屬性，而中間的那個格子則水平重復(fù)和垂直方向的重復(fù)都要執(zhí)行。

5、完成繪制，實(shí)現(xiàn)效果

http://www.zhangxinxu.com/wor...

2018年4月23日 02:44