位置：首页>> 网络编程>> 网页设计>> background-clip/origin一则运用（2）

background-clip/origin一则运用（2）

作者：blank　来源：蓝色理想　发布时间：2008-04-15 14:45:00　

标签：background,浏览器,css,ie

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

运行代码框

<!DOCTYPE html 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>

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;
}

不足之处：此效果在 Opera 下无法实现。

当然这只是一种对 HTML 代码有洁癖的解决方法（限于对 background-clip 和 background-origin 属性的学习和理解），当然也可尝试其他方法，也许会使 CSS 更简洁，至于各种方法的优缺点自己衡量。

扩展阅读：
《Background and Border》

第一页上一页 1

投稿

background-clip/origin一则运用（2）

猜你喜欢