Spiffy Corners - 用 CSS 建立不需圖片的圓角表格

文章發佈於 : 2007-05-18 11:48:32 | 文章分類 : 程式相關
標籤 :

剛剛找到利用CSS就可以不需要作圓角圖,然後做出圓角的感覺.
突然覺得自己前幾天在搞圖片,難道是搞心酸的嗎...
就當做多學會一點東西吧.

Spiffy Corners 原始網站
<style type="text/css">
.
spiffy{
display:block;
}
.
spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#0a67e6;
}
.
spiffy1{
border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.
spiffy2{
border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.
spiffy3{
border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
}
.
spiffy4{
border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
}
.
spiffy5{
border-right:1px solid #478dec;
border-left:1px solid #478dec;
}
.
spiffy_content{
padding:0px 5px;
background:#0a67e6;
}
</
style>
<
div>
<
class="spiffy">
<
class="spiffy1"><b></b></b>
<
class="spiffy2"><b></b></b>
<
class="spiffy3"></b>
<
class="spiffy4"></b>
<
class="spiffy5"></b>
</
b> <div class="spiffy_content">
<!-- 
Your Content Goes Here -->
</
div>
<
class="spiffy">
<
class="spiffy5"></b>
<
class="spiffy4"></b>
<
class="spiffy3"></b>
<
class="spiffy2"><b></b></b>
<
class="spiffy1"><b></b></b>
</
b>
</
div>


 Love is waiting so you don't have to. Join Date.com for free!
 Join Asia FriendFinder the Largest Asian Dating Site on the Web for FREE!
 Kaspersky Security for Internet Gateway 7.0
 Know when to sell on eBay using research

閱讀全文 | 回 應(5) |

   ㄚ凱的回覆 @ 2007-05-18 12:05:20   http://blog.darkhero.net   

我總覺得這樣看原始碼的時候,腦子反而會一片混亂....

   好手的回覆 @ 2007-05-18 12:47:23   http://blog.onlyone.idv.tw   

IE 7 還是無法顯示 … 是Firefox only...哈!
還是等過陣子再看看有沒有更好的吧!網頁設計實在不是一門簡單的學問^^"

   阿維的回覆 @ 2007-05-18 13:11:44   http://blog.hsdn.net   

凱大人...
腦子會一片混亂,那應該是我的介面弄得太差了,我去檢討一下.

好手...
我還沒有在IE7上面測試過,
瀏覽器太多種了,網頁設計的時候光是解決瀏覽器的問題就可以搞很久了

   ㄚ凱的回覆 @ 2007-05-18 13:24:21   http://blog.darkhero.net   

阿維
我的意思是說,當用那個 "免圖片CSS圓角" 的時候..在整理 template 的時候,而反而會花費更多的精神在找該把我的內文放在哪...
個人覺得這樣並不是一個好事,為了少一點圖片,結果 html code 多更多,要是一個畫面有多個區塊要用到,那不就瘋了~

   阿維的回覆 @ 2007-05-18 14:16:24   http://blog.hsdn.net   

凱大人說的沒錯..
我剛剛自己在使用的時候,
讓我超級想要放棄的,
用圖片快多了,而且html也比用CSS乾淨

發 表 回 覆  (*代表必須輸入的欄位)

  • *姓名 :  

  • email :  

  •   網址 :   請用http://開頭喔

  • *回覆內容 :  

  • *驗證碼 : 
  • This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)

    請輸入上面圖案內的英文字母與數字,英文字母大小寫不受影響

  • 請原諒阿維這個懶惰鬼沒有寫新回覆通知的功能,
    如果需要回覆通知,歡迎訂閱回覆的RSS 
  •  會開新的視窗,不會影響回覆的內容喔 :)