Re: 圓角框@IE

[eye12006 (eye)]

※ 引述《eye12006 (eye)》之銘言：
: 請問圓角框在IE可以純脆用CSS作到嗎?
: 我用Firefox可以用IE就爛了...b
: 不知道這個IE的bug可不可以避免
: thanks


==================================================================

div.RoundedCorner {background: #F0F0F0}
b.rtop, b.rbottom {display:block;background: #FFF}
b.rtop b, b.rbottom b {display:block;height: 1px;overflow: hidden;
background: #F0F0F0}
b.r1{margin: 0 5px}
b.r2 {margin: 0 3px}
b.r3 {margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4 {margin: 0 1px;height: 2px}

==========

<div class="RoundedCorner">
          <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b
class="r4"></b></b>

喵喵喵喵喵

      <b class="rbottom"><b class="r4"></b><b class="r3"></b><b
class="r2"></b><b class="r1"></b></b>
</div>


thanks

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.229.59.238
推 Chenson:驚...我用IE6.0也ok (in win2000)
推 ileadu:哈 真的可以喔 ie sp1 in winxp pro sp2
推 TKirby:推薦這篇文章
推 ileadu:其實你這技法 很多高手都還不知道喔...
→ ileadu:一般還是以圖片做的比較多..
推 book329:這方法真的很妙 從沒想過可以這樣搞  厲害！
推 eye12006:我也是從某個地方看到的
→ eye12006:但是忘記在哪了@@a...所以沒著名出處,sorry
推 eliang:這方法叫 Nifty Corner,可以用google找找看
推 gckenny:b tag內空白，有能通過Validator的方法嗎？
推 ileadu:why 有空白？ 我的就沒有..
> -------------------------------------------------------------------------- <

作者: akou (Akou) 看板: Web_Design
標題: [問題] 請問yahoo這個旁邊的表格怎麼做?
時間: Fri Apr 21 21:26:34 2006

各位好喔
http://tw.my.club.yahoo.com/my/myclub

就是這個登入網頁的左邊登入表格

他四周有點圓角，可是又不是用圖片做的

請問可以教一下嗎？用css?

我適用Dreamweaver 8，麻煩了！謝謝您

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 203.70.93.186
推 PhillyMars:精華區 7/2/23
推 akou:對不起...請問有了那段CSS之後該怎麼用?
→ akou:因為我找到http://blog.tmu.edu.tw/b101091044/000640.html
→ akou:好像是原文吧，可是我整個貼上到DW上也沒用耶~一片空白只有喵
推 PhillyMars:這是網路上的範例 http://0rz.net/d11gx 看原始碼
推 akou:對不起，為什麼我看起來是只有字，沒有框線?
→ akou:。是我瀏覽器的問題嗎？可是我看YAHOO就可以耶......天啊！
推 andreli:他沒有框線，可是背景有淡淡的圓角啊，看仔細囉
推 akou:謝謝，我看到了！這個範例好淡!謝謝
> -------------------------------------------------------------------------- <

我稍微整理一下...讓code不會這麼複雜...


<style type="text/css">
.block {
  background: #aaa;
  }
.roundedcorner {
  display: block;
  background: #fff;
  }
.roundedcorner div {
  display: block;
  height: 1px;
  overflow: hidden;
  background: #aaa;
  }
.r1 {margin: 0 5px;}
.r2 {margin: 0 3px;}
.r3 {margin: 0 2px;}
.r4 {margin: 0 1px;}
</style>



<div class="block">
<div class="roundedcorner"><div class="r1"></div><div class="r2"></div>
                           <div class="r3"></div><div class="r4"></div></div>
內容
<div class="roundedcorner"><div class="r4"></div><div class="r3"></div>
                           <div class="r2"></div><div class="r1"></div></div>
</div>




※ 編輯: picachuxyz      來自: 220.132.202.165      (04/22 14:34)