純CSS模擬帶有立體效果的圓角按鈕，長(zhǎng)度自適應(yīng)，兼容所有瀏覽器，無(wú)CSS Hack！
Posted on 2011-10-25 21:18 隨它去吧 閱讀(2522) 評(píng)論(5) 收藏 舉報(bào)閑話少說(shuō)，最近遇到一個(gè)頁(yè)面上需要排列個(gè)數(shù)不等的按鈕，且每個(gè)按鈕的文字長(zhǎng)度不一，這樣一個(gè)有點(diǎn)棘手的需求。
前臺(tái)設(shè)計(jì)要求該按鈕必須是圓角且?guī)в辛Ⅲw感效果，但是由于按鈕文字長(zhǎng)短不一，若使用背景圖片制作按鈕會(huì)存在難以處理的情況（按鈕背景是png圖片，半透明效果，使用疊加法會(huì)使得按鈕半透明部分疊在一起變得丑陋不堪），最后不得不想辦法使用純CSS來(lái)模擬這樣一個(gè)按鈕，經(jīng)過(guò)多次試驗(yàn)，終于拿出來(lái)一個(gè)解決方案。
截圖在這里：
要做這樣一個(gè)東西，顯然必須滿足兼容性這一基本要求，而且盡量不要使用CSS Hack，幸運(yùn)的是，我這種模擬剛好實(shí)現(xiàn)了以上要求。
代碼如下：
<!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');">三個(gè)字</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');">五個(gè)字也行</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>
簡(jiǎn)單說(shuō)一下原理：
兼容性體現(xiàn)在視覺(jué)效果上一個(gè)最直觀的就是不同瀏覽器對(duì)盒模型解析和渲染的區(qū)別，而盒模型區(qū)別目前主要集中在Border寬度對(duì)容器寬度的占用上，因此我決定放棄使用border輔助實(shí)現(xiàn)效果，雖然那樣可以節(jié)省很多代碼（事實(shí)上，我也弄成了一個(gè)，但是離不開CSS Hack）。
放大您的瀏覽器可以看到，該按鈕為2px的圓角按鈕，主要采用了如下方法：
1、將div改為inline-block的方式
2、使用內(nèi)外容器的高度差和背景差實(shí)現(xiàn)邊框線效果
3、所有div容器的vertical-align都改為top對(duì)齊
4、主容器放置一個(gè)與背景顏色不同的容器從視覺(jué)上將按鈕背景切分成上下兩半，模擬出過(guò)渡色
5、存放文字的容器設(shè)置為自動(dòng)寬度，并設(shè)定一個(gè)最小寬度
OVER……
補(bǔ)充：抱歉，忘了說(shuō)，IE6不支持，我已經(jīng)習(xí)慣不支持IE6了Orz
浙公網(wǎng)安備 33010602011771號(hào)