自适应圆角 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 自适应圆角

自适应圆角

浏览:1934次出处信息

前言

有时候我们不得不面对圆角，也很傻很天真的认为利用 CSS3 的新特性对浏览器分级支持是最好解决方案，但现实≠理想…

需求

3px 圆角
宽度自适应（随字数扩展宽度并自动换行）
方便换肤
不使用图片（对可维护性/性能均有影响）

困惑

经典的解决方案看起来像这样：

以下是代码片段：
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>传统方案及bug</title>
<style>
body{margin:100px;background-color:red;}
div, p, b{margin:0;padding:0;}
b{display:block;}
.rc{display:inline-block;#display:inline;#zoom:1;}
/* float 效果相同
.rc{float:left;} */
.rc1, .rc2, .rc .bd{border-style:solid;border-color:black;background-color:yellow;}
.rc1, .rc2{height:1px;overflow:hidden;}
.rc2, .rc .bd{border-width:0 1px;}
.rc1{margin:0 2px;height:0;border-width:1px 0 0;}
.rc2{margin:0 1px;}
.rc .bd{padding:0 6px;line-height:1.5;}
</style>
</head>

<body>

<div class="rc">
    <b class="top"><b class="rc1"></b><b class="rc2"></b></b>
    <div class="bd">
        <p>FML!!!</p>
    </div>
    <b class="bottom"><b class="rc2"></b><b class="rc1"></b></b>
</div>

</body>

</html>

使 rc float: left 或 display: inline-block 或许能满足需求，不过 IE 6&7 出现 bug：IE6中依然显示为dispaly:block，而IE7中top 和 bottom缩成一坨，不肯扩展开来，而在 rc1/rc2/rc3 中插入文字

以下是代码片段：
<b class="rc1">XXX</b>

则只能扩展到文字XXX的宽度，无法与 bd 对齐！
如果你能搞定，麻烦留言告诉我一下

解决

试了几个方法均不通，也搜索不到这个 bug，这时想到了 Google 系产品的 1px 圆角按钮：

这是前 Google 视觉设计师 Doug Bowman 的功劳，后转会到Twitter，Doug Bowman 为此写过一篇博文《Recreating the button》，并指出：

The magical inline-block solved everything, except in IE. That’s where the genius of Google engineers came in. They knew how to get tricks working in all browsers, and this technique interested a couple of them enough that they dedicated the time to make it work.

打开 Gmail，用 firebug 艹艹看了一下，写了个简单的 demo：

以下是代码片段：
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>自适应圆角</title>
<style>
body{margin:100px;background-color:red;}
div, p{margin:0;padding:0;}
.div1, .div2, .div3{display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:black;}
.div1{border-width:1px;}
.div2, .div3{#left:-2px;border-width:0 1px;background-color:yellow;}
.div2{margin:0 -2px;}
.div3{margin:1px -2px;padding:0 6px;line-height:1.5;}
.pointer1, .pointer2{position:absolute;top:7px;width:0;height:0;overflow:hidden;border-top:6px transparent dotted;border-bottom:6px transparent dotted;}
.pointer1{left:-9px;border-right:6px black solid;}
.pointer2{left:-8px;border-right:6px yellow solid;}
</style>
</head>

<body>

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>FML!!!</p>
        </div>
    </div>
    <div class="pointer1"></div>
    <div class="pointer2"></div>
</div>

</body>

</html>

效果如下：

不仅满足了需求，代码量及结构嵌套也很少。

代码说明

div1 实现上下两条边，div2 实现 2px 圆角处的 4个点（一般人只有3点），div3 实现左右两条边，div1 设置左右边框的原因是避免IE 6&7 中的一个盒模型的小 bug，有兴趣研究的话可去掉左右边框看效果
pointer1 实现小三角的边框，pointer2 实现小三角的背景，此处利用了 border 来模拟小三角，这其中会遇到IE 6 的边框不透明 bug。另外，你也可以看看OOCSS式的写法
宽度自适应利用的是 display: inline-block，注意IE 6&7 中的处理方式
#left:-2px 之前的 # 为 IE 6&7 hack，多写为*，这里用#一是表明偶的与众不同，二是微软的 Expression Web格式化 CSS 的时候若{}中出现*则会把代码搞乱，此处 IE 6&7 中出现了 margin-left 负值无效的 bug ，通过 position:relative 加 left: -2px 来fix
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” /> 不写为 <meta charset=”utf-8″ /> 的原因是 IE 下中文标题会乱码

可以看出：IE 6&7 bug 众多的特点在此例中表现的淋漓尽致！

最后的话

阮一峰老师也写过一篇《制作Gmail式按钮》，配合强大的 jquery 来实现按钮各种状态，最后的总结也很精辟，修改一下下：

虽然这种按钮（圆角）的视觉效果比较理想，有很多设计上的优点，但是局限性也很大。一方面，它需要大量的冗余代码，与语义网的原则相违背…

个人认为较完美的解决方案还是利用浏览器的自身特性，提供对不同的浏览器分级支持，渐进增强（比如 IE 下显示为直角，对CSS 3支持较好的浏览器显示为圆角），这才是开发效率、可维护性、语义、性能的最佳平衡。

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：定位相关的怪异问题

后一篇：默认Web字体样式 >>

文章信息

作者：ytzong 来源： ISD Webteam
标签：圆角自适应
发布时间：2009-11-22 20:50:44

建议继续学习

近3天十大热文