纯css实现的质感圆角按钮

最新推荐文章于 2023-03-06 10:52:46 发布

weixin_30830327

最新推荐文章于 2023-03-06 10:52:46 发布

阅读量226

点赞数

原文链接：http://www.cnblogs.com/duwx/archive/2010/06/21/1761784.html

版权

说明：

1、display:inline-block; 这个属性IE8和firefox3.0已经支持，IE6和IE7不支持，解决方法是*display:inline; zoom:1;原因如下：使得display:inline;使得IE下元素变成内联元素，然后使用zoom:1;触发块元素的layout（我理解为可布局——对高度宽度敏感）。

2、class为“c”和“d”中的样式中用line-height，而没有使用高度原因在于使用height会使得IE下的元素获得layout，结果IE6与IE7下class为“c”的DIV宽度会延伸至100%；宽度满屏。

3、class为“b”的样式中position:relative;解决IE6下负的margin部分不可见的问题。_float:left;开始使用的是float：left，但是IE7下左-1px的大小没有起作用。无左浮动，IE6下由于高度原因，使IE6获得layout，结果宽度满屏延伸。于是就用了个针对IE6的hack。再想想办法，应该可以找到无hack的方法。
最后，我根据自己的理解又写了其他两个方法实现渐变背景，宽度自适应且圆角的按钮，且没有任何hack，兼容主流浏览器。唯一的缺点不能与文字图片等内联元素混排，因为最外DIV使用浮动。

方法一：纯css实现的质感圆角按钮

<title>纯css实现的质感圆角按钮</title>
<style type="text/css">
body{font-size:12px;}
.a{display:inline-block; border-width:1px 0; border-color:#bbbbbb; border-style:solid; vertical-align:middle; *display:inline; zoom:1;}
.b{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; _float:left;}
.c{line-height:10px; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.d{padding:0 8px; line-height:22px; color:#000000; margin-top:-12px; cursor:pointer;}
</style>

<body>
<div class="a">
<div class="b">
   <div class="c"> </div>
   <div class="d">css圆角按钮</div>
</div>
</div>
 
<div class="a">
<div class="b">
   <div class="c"> </div>
   <div class="d">css圆角按钮2</div>
</div>
</div>
</body>

方法二：稍微繁琐点的

<title>纯css实现的质感圆角按钮</title>
<style type="text/css">
.a{float:left; border-width:1px 0; border-color:#bbbbbb; border-style:solid;}
.b{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:left;}
.c{height:10px; padding:0 8px; font-size:12px; overflow:hidden; background:#f9f9f9; border-bottom:2px solid #eeeeee; margin-bottom:-12px; float:left;}
.d{padding:0 8px; line-height:22px; font-size:12px; color:#000000; clear:both; cursor:pointer; position:relative;}
.c span{visibility:hidden;}
</style>

<body>
<div class="a">
<div class="b">
<div class="c"><span>css圆角按钮</span></div>
<div class="d">css圆角按钮</div>
</div>
</div>
</body>

图：

已通过兼容性测试，不上多图了

针对性说明：

1、要想实现自适应，在IE下，如果定高，就要设置浮动属性，否则元素宽度满屏显示，从class为“b”和“c”的两个样式可以看到。

2、为了让class为“c”的元素和class为“d”的元素宽度一致，可谓来了个内容copy。只是“c”的文字内容设置为隐藏，但是区域保留，即宽度保留，实现渐变背景高光部分与文内容宽度一致。

方法二：相对简介精简的

代码：

<title>纯css实现的质感圆角按钮</title>
<style type="text/css">
.a{float:left; border-width:1px 0; border-color:#bbbbbb; border-style:solid;}
.b{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:left;}
.c{line-height:10px; color:#f9f9f9; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.d{padding:0 8px; line-height:22px; font-size:12px; color:#000000; clear:both; margin-top:-12px; cursor:pointer;}
</style>

<body>
<div class="a">
<div class="b">
<div class="c"> </div>
<div class="d">css圆角按钮</div>
</div>
</div>
</body>

图：

已做过兼容性测试，就不上多图了，长得一样的。

说明：class为"c"的DIV中的空格—— 是必须的，否则该DIV会被当作空DIV处理，高度为0.

其他就不多说了。

转载于:https://www.cnblogs.com/duwx/archive/2010/06/21/1761784.html

weixin_30830327

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css实现的质感圆角按钮

说明：1、display:inline-block; 这个属性IE8和firefox3.0已经支持，IE6和IE7不支持，解决方法是*display:inline; zoom:1;原因如下：使得display:inline;使得IE下元素变成内联元素，然后使用zoom:1;触发块元素的layout（我理解为可布局——对高度宽度敏感）。2、class为“c”和“d”中的样式中用line-h...
复制链接

扫一扫