|
下面舉個運用 background-origin 屬性的簡單例子，效果如下圖：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
HTML 部分：
<button>這里是按鈕，是鈕不是妞</button>
CSS 部分（詳細(xì)見注釋）：
button {
display:inline-block;/*觸發(fā)hasLayout*/
height:26px;
padding:0 20px;
cursor:pointer;
*overflow:visible;/*消除IE按鈕左右padding隨字?jǐn)?shù)長度變化的BUG*/
border:3px double #95071b;/*用3px 雙邊來模擬設(shè)計圖中的白線*/
border-right-color:#650513;
border-bottom-color:#650513;
background-color:#95071b;
/*設(shè)置背景裁切方式和參考線*/
-moz-background-clip:padding;
-webkit-background-clip:padding;
-khtml-background-clip:padding;
-moz-background-origin:padding;
-webkit-background-origin:padding;
-khtml-background-origin:padding;
/*向前兼容*/
background-clip:padding;
background-origin:padding;
color:#fff;
font-size:12px;
line-height:20px;
/*修正IE6下高度問題*/
_padding-top:2px;
_line-height:14px;
}
不足之處：此效果在 Opera 下無法實現(xiàn)。
當(dāng)然這只是一種對 HTML 代碼有潔癖的解決方法（限于對 background-clip 和 background-origin 屬性的學(xué)習(xí)和理解），當(dāng)然也可嘗試其他方法，也許會使 CSS 更簡潔，至于各種方法的優(yōu)缺點自己衡量。
擴展閱讀：
《Background and Border》
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2846487-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2008/5688.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 background-clip/origin一則運用 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 background-clip/origin一則運用 [1]
