background-clip/origin一则运用

来源：作者：blank 出处：巧巧读书 2008-04-15 进入讨论组

关键词：
firefox
mozilla
opera
html
.net

下面举个运用 background-origin 属性的简单例子，效果如下图：

运行代码框
<!DOCTYPE <a href="/keys/html/index.html" target="_blank">html</a> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>background-clip 与 background-origin 的一则运用</title> <style type="text/css"> button{ display:inline-block;/*触发hasLayout*/ height:26px; padding:0 20px; cursor:pointer; *overflow:visible;/*消除IE按钮左右padding随字数长度变化的BUG*/ border:3px double #95071b;/*用3px 双边来模拟设计图中的白线*/ border-right-color:#650513; border-bottom-color:#650513; background-color:#95071b; /*设置背景裁切方式和参考线*/ -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; } </style> </head> <body> <h1>background-clip 与 background-origin 的一则运用</h1> <ul> <li>兼容：IE6、IE7、Firefox2+、Firefox3+、Safari、Konqueror </li> </ul> <p><button>这里是按钮，是钮不是妞</button></p> <p>Designed by：<a href="http://www.planabc.net" title="PlanABC-怿飞's Blog"> 怿飞</a></p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

background-clip/origin一则运用（图二）

HTML 部分：

<button>这里是按钮，是钮不是妞</button>

CSS 部分（详细见注释）：

button {
    display:inline-block;/*触发hasLayout*/
    height:26px;
    padding:0 20px;
    cursor:pointer;
    *overflow:visible;/*消除IE按钮左右padding随字数长度变化的BUG*/

    border:3px double #95071b;/*用3px 双边来模拟设计图中的白线*/
    border-right-color:#650513;
    border-bottom-color:#650513;

    background-color:#95071b;

    /*设置背景裁切方式和参考线*/
    -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;
}