博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

纯CSS模拟带有立体效果的圆角按钮，长度自适应，兼容所有浏览器，无CSS Hack！

Posted on 2011-10-25 21:18  随它去吧  阅读(2453)  评论(5)  编辑  收藏  举报

闲话少说，最近遇到一个页面上需要排列个数不等的按钮，且每个按钮的文字长度不一，这样一个有点棘手的需求。

前台设计要求该按钮必须是圆角且带有立体感效果，但是由于按钮文字长短不一，若使用背景图片制作按钮会存在难以处理的情况（按钮背景是png图片，半透明效果，使用叠加法会使得按钮半透明部分叠在一起变得丑陋不堪），最后不得不想办法使用纯CSS来模拟这样一个按钮，经过多次试验，终于拿出来一个解决方案。

截图在这里：

要做这样一个东西，显然必须满足兼容性这一基本要求，而且尽量不要使用CSS Hack，幸运的是，我这种模拟刚好实现了以上要求。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模拟圆角按钮</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
    .RANDB{display:inline-block; width:auto; font-size:12px; font-family: 微软雅黑; text-align:center; overflow:hidden; cursor:pointer;border: 0px solid red; }
    .RANDB div{display:inline-block;vertical-align:top;margin:0px; padding:0px;}
    .RANDB .l1{background-color:#d1d1d1; border:none; width:1px; height:20px; margin-top:2px;}
    .RANDB .l2{background-color:#d1d1d1; border:none; width:1px; height:22px; margin-top:1px;}
    .RANDB .l2 .i{background-color:#eeeeee; border:none; width:1px; height:20px; margin-top:1px;}
    .RANDB .l2 .i .t{background-color:#ffffff; border:none; width:1px; height:10px;}
    .RANDB .l3{background-color:#d1d1d1; border:none; width:auto; height:24px; min-width:40px;}
    .RANDB .l3 .i{background-color:#eeeeee; border:none; width:auto; height:22px; min-width:40px; margin-top:1px; overflow:hidden;}
    .RANDB .l3 .i .t{background-color:#ffffff; border:none; width:100%; height:11px; min-width:40px;}
    .RANDB .l3 .i .caption{border:none; width:auto; height:22px; line-height:22px; min-width:40px; margin-top:-16px; display:block; padding: 0px 6px 0px 6px; cursor:pointer;}
</style>
</head>
<body style="background-color:#ffffff; font-size:12px;">
    <div class="RANDB">
        <div class="l1"></div><div class="l2"><div class="i"><div class="t"></div></div></div><div class="l3"><div class="i"><div class="t"></div><div class="caption" onclick="alert('yes');">三个字</div></div></div><div class="l2"><div class="i"><div class="t"></div></div></div><div class="l1"></div>
    </div>
    <div class="RANDB">
        <div class="l1"></div><div class="l2"><div class="i"><div class="t"></div></div></div><div class="l3"><div class="i"><div class="t"></div><div class="caption" onclick="alert('yes');">我是按钮</div></div></div><div class="l2"><div class="i"><div class="t"></div></div></div><div class="l1"></div>
    </div>
    <div class="RANDB">
        <div class="l1"></div><div class="l2"><div class="i"><div class="t"></div></div></div><div class="l3"><div class="i"><div class="t"></div><div class="caption" onclick="alert('yes');">五个字也行</div></div></div><div class="l2"><div class="i"><div class="t"></div></div></div><div class="l1"></div>
    </div>
    <div class="RANDB">
        <div class="l1"></div><div class="l2"><div class="i"><div class="t"></div></div></div><div class="l3"><div class="i"><div class="t"></div><div class="caption" onclick="alert('yes');">就算再多的文字我也不怕</div></div></div><div class="l2"><div class="i"><div class="t"></div></div></div><div class="l1"></div>
    </div>
</body>
</html>

简单说一下原理：

兼容性体现在视觉效果上一个最直观的就是不同浏览器对盒模型解析和渲染的区别，而盒模型区别目前主要集中在Border宽度对容器宽度的占用上，因此我决定放弃使用border辅助实现效果，虽然那样可以节省很多代码（事实上，我也弄成了一个，但是离不开CSS Hack）。

放大您的浏览器可以看到，该按钮为2px的圆角按钮，主要采用了如下方法：

1、将div改为inline-block的方式

2、使用内外容器的高度差和背景差实现边框线效果

3、所有div容器的vertical-align都改为top对齐

4、主容器放置一个与背景颜色不同的容器从视觉上将按钮背景切分成上下两半，模拟出过渡色

5、存放文字的容器设置为自动宽度，并设定一个最小宽度

OVER……

补充：抱歉，忘了说，IE6不支持，我已经习惯不支持IE6了Orz