当前位置：网络学院首页 >> 设计教程 >> DIV特效代码 >> css3背景定位运用实例

css3背景定位运用实例 (2)

来源：中国设计秀作者：佚名点击：926 加入收藏

关键字：背景运用实例 css WEB标准 div

下面举个运用 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>
<p>兼容：IE6、IE7、Firefox2+、Firefox3+、Safari、Konqueror</p>
<p><button>搜罗精美酷站,提供精选素材！</button></p>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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 更简洁。

[1] [2]

2008-06-19 00:44:00 出处：中国设计秀cnwebshow.com

本文引用地址：http://www.cnwebshow.com/edu/html/article_4861.html

热点文章/相关文章