網頁制作CSS教程:自適應圓角

2024-07-11 09:03:29

字體：大中小

來源：轉載

供稿：網友

武林網(www.49028c.com)文章簡介：有時候我們不得不面對圓角，也很傻很天真的認為利用 CSS3 的新特性對瀏覽器分級支持是最好解決方案.

前言

有時候我們不得不面對圓角，也很傻很天真的認為利用 CSS3 的新特性對瀏覽器分級支持是最好解決方案，但現實≠理想…

需求困惑

經典的解決方案看起來像這樣：

<!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 中插入文字

則只能擴展到文字XXX的寬度，無法與 bd 對齊！
如果你能搞定，麻煩留言告訴我一下 :)

解決

試了幾個方法均不通，也搜索不到這個 bug，這時想到了 Google 系產品的 1px 圓角按鈕：

網頁制作CSS教程:自適應圓角

這是前 Google 視覺設計師 Doug Bowman 的功勞，后轉會到Twitter（AD一下：@ytzong），Doug Bowman 為此寫過一篇博文《Recreating the button》 demo在此。不過demo 也僅僅是 demo，產品中使用的還是某對天才工程師夫婦的神作，他們有足夠的時間來做這項工作：

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>

效果如下：

網頁制作CSS教程:自適應圓角