黃小二的讀書筆記
有才而性緩定屬大才，有智而氣和斯為大智。人偏狹我受之以寬容，人險仄我持之以坦蕩。緩事宜急干，敏則有功；急事宜緩辦，忙則多措。 --李叔同
首頁
新隨筆
聚合
管理
隨筆-7 評論-24 文章-102 trackbacks-0
[轉] 完美打造超完美CSS圓角框
原文轉自：
完美打造超完美CSS圓角框
http://www.siteengine.net/thread_13_13146_1.html
推薦網站：
Spiffy Corners
http://www.spiffycorners.com/index.php?sc=spiffy&bg=1FD477&fg=264ADA&sz=5px
只需要填入 前景色、背景色、邊框粗細 就可以自動生成 圓角邊框 代碼。
完美打造超完美CSS圓角框
CSS圓角框的出現已經不是一天兩天了，它出現的直接目的就是為了替換原有的以四個角上安放圖片為主的圓角框，它的優勢在于不需要用圖片，對于統一主題中出現不同顏色樣式的需求，不需要用作圖工具重復制作多套圓角圖片，而可以直接從css抽取顏色信息，方便做成獨立的配色方案，其次，它對于圓角框長寬等位置信息的設置具有比圖片圓角更為高明的自適應能力，真正可以把程序員的注意力集中到內容的排布而不是陷入對頁面布局應對的泥藻中（這也可以作為一個簡單的分離關注點的有效例子）。
CSS圓角框有如此優秀，那么為什么不用呢，最近，在我和一位好兄弟合作的項目中出現了上述需求（這位兄才在web開發領域擁有多年的經驗，曾經自己寫過ajax框架，他做的東西精巧別致，思維獨特，始終是我心目中強悍的高手），于是決定在其中使用CSS圓角框替換傳統的圖片圓角，我把設想告訴他，但是他的第一反應是讓我不要用CSS圓角，原因如下：
CSS圓角從所周知會出現鋸齒，難以處理
CSS圓角內部一般都無法放置復雜的頁面元素，放置其中的元素要么會出現大小難以調節，要么會使得整個圓角框發生嚴重的元素構圖混亂（也就是整個頁面不聽我們的話，發生破裂）
CSS圓角很難跨瀏覽器，兼容性差
（人們常說提出一個問題往往比解決一個問題更為難能可貴，更何況我的這位兄弟能在第一反應給CSS圓角框的缺陷做出如此精辟的概括，更顯示出他在web開發領域扎實的基本功和對事物針砭時弊的觀察力，這一點始終讓我望塵莫及。）
上述CSS圓角框的缺陷都如我這位兄弟所說，的確都存在，而且沒有一個問題能夠輕易解決，但是有句話怎么說來著，“車到山前未必有路，與其繞過這座山，還不如踏踏實實一步一個腳印的踏出一條路來”，一來方便自己行走，二來蔭庇后人。
那么讓我們一個一個的仔細分析上述問題，慢慢解決他們
問題一
首先看鋸齒，我們知道鋸齒的實質是肉眼無法接受眼前所看到的現實的狀況，計算機在處理曲線圖形時，若是沒有專門的解決方案，鋸齒可以說無處不在，那么這個解決方案究竟在那里呢？聰明的你一定會在第一時間聯想到，我們的圖形處理利器photoshop（以下簡稱ps），ps在圖形處理領域可謂一直是領軍羊，它不僅處理速度極快，而且在技術上擁有大量的積累。我們這里只看它是如何處理鋸齒的
下圖為鋸齒和抗鋸齒后圖形的對比
我們看到在使用了抗鋸齒的圓角邊緣呈現出一種漸進的半透明狀態，沒錯，它其實就是一個半透明，這也就是ps中抗鋸齒算法的本質假設前景圖層上某A點，背景圖層上某B點，目標半透明C點，那么我們可以用如下公式來獲取目標點C的RGB值：
XML/HTML代碼
R(C)=(R(A)*alpha+R(B)*(256-alpha))/256
G(C)=(G(A)*alpha+R(B)*(256-alpha))/256
B(C)=(B(A)*alpha+R(B)*(256-alpha))/256
alpha取值范圍 [0,256]
(R Red, G Green, B Blue)
這就是一個半透明的算法（其實是一個著差運算），這個算法是方形（box）抗鋸齒算法的基礎（當然，抗鋸齒本身就是一個高級話題，算法也有很多種，比如方形（box），三角（triangle），高斯（gauss），米西爾（mitchell），其中大多是動態圖形抗鋸齒，有興趣的朋友可以自己研究一下，這里只討論最簡單的靜態圖形抗鋸齒），方形抗鋸齒算法是在過濾區域內使用均等的權重把采樣疊加在一起實現的，也就是說離邊緣越近，alpha值越高，離邊緣越遠，alpha值越低，你可以在邊緣的各像素平均分布alpha值來達到抗鋸齒的目的
對于鋸齒和抗鋸齒有了基本的概念，那么解決方法也有了
1） 最簡單的解決方法是在ps中做一個圓角矩形，放大后把邊緣的各像素點依葫蘆畫瓢照搬到頁面上去（用css控制border-color和background-color兩個屬相實現）
2） 更為穩妥的解決方法應該是做一個專門的程序來解決抗鋸齒，這樣一通百通，原本想自己寫，可是得益于別人已經做了這樣的工作
http://www.spiffycorners.com
這是一個php的實現版本，用的就是方形抗鋸齒算法，有了這么方便的工具，相信你可以最快速的做出沒有任何鋸齒的CSS圓角框來
問題二，三
在web2.0如火如荼的今天，圓角成為一種首推的web2.0標志性設計元素和風格，webstandard由于其強大的控制能力和便于修改的特性得到大面積推廣，這直接促使div（span）+css的設計模式越來越得到大家的認可，于是CSS圓角框就有了它存在的最大理由，可惜的是，大多數圓角框的設計意圖僅僅是為了要在其中放置一些簡單的頁面元素，諸如文本和圖片，由于需求的局限，設計者無法考慮到日后圓角框還有更大的活動空間（不要去責怪設計者，CSS圓角框作為一種設計手段上的革新，本身就是一種偉大的顛覆和創造，我們又怎么忍心對設計者要求的如此十全十美，如此苛刻呢）
下圖為在Firefox（以下簡稱ff）中頁面出現混亂的情況
正確的顯示效果
由于圓角框內放置了復雜的頁面元素（包括了float屬性，margin屬性等），ff下混亂的頁面元素大家也看到了，可以用慘不忍睹來形容，而同樣的錯誤在ie6， ie7中也會發生，那么究竟是什么導致了元素混亂不堪呢？
下面以spiffycorners生成的代碼為例
CSS代碼
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#CC0000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #e99191;
border-right:1px solid #e99191;
background:#d83f3f}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #f9e5e5;
border-right:1px solid #f9e5e5;
background:#d53030}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #d53030;
border-right:1px solid #d53030;}
.spiffy4{
border-left:1px solid #e99191;
border-right:1px solid #e99191}
.spiffy5{
border-left:1px solid #d83f3f;
border-right:1px solid #d83f3f}
.spiffyfg{
background:#CC0000}
XML/HTML代碼
<
div
>
<
b
class
="spiffy"
>
<
b
class
="spiffy1"
><
b
></
b
></
b
>
<
b
class
="spiffy2"
><
b
></
b
></
b
>
<
b
class
="spiffy3"
></
b
>
<
b
class
="spiffy4"
></
b
>
<
b
class
="spiffy5"
></
b
></
b
>
<
div
class
="spiffyfg"
>
<!
– content goes here –
>
</
div
>
<
b
class
="spiffy"
>
<
b
class
="spiffy5"
></
b
>
<
b
class
="spiffy4"
></
b
>
<
b
class
="spiffy3"
></
b
>
<
b
class
="spiffy2"
><
b
></
b
></
b
>
<
b
class
="spiffy1"
><
b
></
b
></
b
></
b
>
</
div
>
在仔細觀察了代碼之后我們發覺一個問題，在其中的容器元素spiffyfg的css中沒有出現float屬性，float是用于控制頁面元素浮動的工具，它是負責頁面布局的強有力的手段，我們在頁面設計中會用到大量的float控制代碼，但是，對于float而言，微軟的IE和Firefox有著不同的理解，在W3C對于webstandard的標準中，嚴格的規定了屬性的繼承法則，子元素必須以明文聲明某個屬性是從它的父元素繼承而來，若是該屬性缺失，則認為繼承終止，Firefox就嚴格的貫徹了這一標準， 而微軟的產品一向以實用主義和尊重用戶體驗聞名，這勢必導致他更遵從于產品的價值標準，在IE中，瀏覽器對屬性的解釋會采取就近原則，如果子元素屬性缺失，就會從它的父元素獲取屬性。這種做法粗看上去方便了設計者，但已不適應走向標準化的今天。
沒錯，我們已經找到了問題的癥結，于是我們在這里可以把第二個和第三個問題歸結為由于ie和ff在float屬性上的不同解釋所引發的沖突和不兼容。
我們找到了問題的本質原因，但又帶來了新的問題，如何編寫代碼適應兩個不同的瀏覽器，出于同一屬性的不同解釋，也就意味著這是一個原子性問題，擅自改動代碼，造成的結果只能是拆東墻補西墻，這時候，我們想，是否有一個工具，IE認可，FF不認可，那不就解決問題了，那么這樣的工具存在嗎，這個時候我的這位兄弟提醒了我，應該說，上帝在關閉一扇門的時候總會為其打開另一扇門（不要把上帝認為是比爾蓋茨^_^），微軟擅做決定改變了標準，讓我們無法設計統一的代碼，但在其css的設計中也提供了一個他獨有的工具：表達式（expression）,表達式的最初設計意圖是為了在css中插入可執行的javascript代碼，方便對群組元素方便的賦值，而在實踐中我們發現，這一工具不為ff認可，于是問題就出現了轉機。
針對屬性繼承的問題，我們可以在容器元素spiffyfg的屬性中插入如下代碼
CSS代碼
.spiffyfg{
background:#CC0000
float:left; /*for Firefox*/
float:expression("none"); /*for IE */
}
還有一個小問題，兩款瀏覽器正對圓角邊框的顯示方法也會有不同，同樣的解決方法，在.spiffy *元素中插入
CSS代碼
.spiffy *{
display:expression("block");
display:-moz-box;
height:1px;
overflow:hidden;
font-size:.01em;
background:#CC0000
}
OK，到現在為止，借助與各種工具，我們成功的打造了一款沒有任何鋸齒，可以容納任意復雜元素而又沒有任何兼容性問題的圓角框本文在思考實踐和寫作過程中均受到了我的這位好兄弟的積極的啟發和引導，可以說沒有他的經驗和智慧，我們無法解決這些問題，文章的大量篇幅也不僅局限于解釋原理和解決問題，而是希望能通過這樣一個在常人看來不起眼的圓角框的改良過程，給大家以問題解決思路和攻克難關的精神上的啟發
問題雖小，我們或許也能找到迂回的道路，可人生中總會碰到絕境，如何逢生不在于工具，而在于你有沒有絕境逢生的信念。
CSS圓角有立體感的DIV邊框
CSS制作圓角有立體感的DIV邊框，沒有使用任何的修飾圖片哦，感覺酷棒，如果對顏色不滿意，可以自己改，不過要注意顏色之間的色差，要不然效果不理想。其實不用圖片的話網頁加載非常快，不過CSs定義略顯麻煩些。
折疊/展開
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
圓角邊框
</
title
>
<
style
type
="text/css"
>
#sash_left
{
}
{
width
:
430px
;
float
:
left
;
}
#sash_left ul
{
}
{
text-align
:
left
;
vertical-align
:
middle
;
padding-left
:
75px
;
}
#sash_left ul li
{
}
{
line-height
:
16px
;
margin
:
2px 0
;
}
.b1, .b2, .b3, .b4
{
}
{
font-size
:
1px
;
overflow
:
hidden
;
display
:
block
;
}
.b1
{
}
{
height
:
1px
;
background
:
#AAA
;
margin
:
0 5px
;
}
.b2
{
}
{
height
:
1px
;
background
:
#E0E0E0
;
border-right
:
2px solid #AAA
;
border-left
:
2px solid #AAA
;
margin
:
0 3px
;
}
.b3
{
}
{
height
:
1px
;
background
:
#E3E3E3
;
border-right
:
1px solid #AAA
;
border-left
:
1px solid #AAA
;
margin
:
0 2px
;
}
.b4
{
}
{
height
:
2px
;
background
:
#E6E6E6
;
border-right
:
1px solid #AAA
;
border-left
:
1px solid #AAA
;
margin
:
0 1px
;
}
.contentb
{
}
{
height
:
186px
;
background
:
#E9E9E9
;
border-right
:
1px solid #AAA
;
border-left
:
1px solid #AAA
;
}
</
style
>
</
head
>
<
body
>
<
div
id
="sash_left"
>
<
b
class
="b1"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b4"
></
b
>
<
div
class
="contentb"
>
<
ul
>
<
li
class
="dashedline"
>
JavaScript/CSS特效代碼
</
li
>
</
ul
>
</
div
>
<
b
class
="b4"
></
b
><
b
class
="b3"
></
b
><
b
class
="b2"
></
b
><
b
class
="b1"
></
b
>
</
div
>
</
body
>
</
html
>
posted on 2010-04-21 12:09
黃小二
閱讀(303)
評論(0)
編輯
收藏
所屬分類:
Web Design
新用戶注冊
刷新評論列表
只有注冊用戶
登錄
后才能發表評論。
網站導航:
博客園
IT新聞
Chat2DB
C++博客
博問
管理
相關文章:
html中圖片ATL參數分行、出錯顯示
CSS網頁配色、隔行換色、選項卡、Div滾動條
[轉] 完美打造超完美CSS圓角框
CSS 書寫相關
《重構HTML: 改善Web應用的設計》讀書筆記
正則表達式相關（增加收集中...）
網頁實際時用GBK還是UTF-8
Dreamweaver 8.0 里的樣式設計器
<
2025年6月
>
日
一
二
三
四
五
六
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
文章分類
(147)
[DB](5)
[DB].MySQL(7)
[DB].Oracle(14)
[DB].SQL Server(8)
Ajax(13)
ASP.NET(18)
C#(19)
J2EE(22)
J2SE(12)
S/S2SH(15)
Web Design(8)
雜談(6)
文章檔案
(108)
2010年6月 (1)
2010年5月 (12)
2010年4月 (18)
2009年9月 (3)
2009年8月 (2)
2009年7月 (6)
2009年6月 (3)
2009年5月 (7)
2009年4月 (10)
2009年3月 (1)
2009年1月 (1)
2008年12月 (4)
2008年11月 (1)
2008年10月 (17)
2008年9月 (17)
2008年8月 (2)
2008年7月 (3)
在線幫助
Java API Specifications
Java 開源大全
javaNB 在線文檔
MSDN 技術資源庫
MySQL 5.1參考手冊
Oracle Documentation
w3school 在線教程
開源軟件庫
Ajax/JavaScript腳本大全
Asp.net源碼專業站
CSDN開源頻道
CSS9.NET
源碼愛好者
社區
developerWorks 中國
最新評論
1.?re: SQL Server 2005/2008 對With Encryption選項創建的存儲過程解密
評論內容較長,點擊標題查看
--專業祛痘
2.?re: SQL Server 2005/2008 對With Encryption選項創建的存儲過程解密
評論內容較長,點擊標題查看
--lolola
3.?re: 在 WinForm中使用 WebClient上傳文件
44444444444444444444444
--熱熱
4.?re: 使用 HibernateTemplate 實現分頁查詢 (HibernateCallback接口)
評論內容較長,點擊標題查看
--redcoatjk
5.?re: SQL Server 2005/2008 對With Encryption選項創建的存儲過程解密
評論內容較長,點擊標題查看
--謝謝樓主
評論排行榜
Powered by:
博客園
模板提供：
滬江博客
Copyright ©2025 黃小二
主站蜘蛛池模板：
泸州市
|
雷州市
|
揭东县
|
镇赉县
|
定西市
|
华池县
|
温州市
|
宜春市
|
淅川县
|
平山县
|
涿鹿县
|
安新县
|
沽源县
|
卢湾区
|
海兴县
|
萨嘎县
|
永福县
|
天台县
|
宝坻区
|
兴义市
|
进贤县
|
乌兰县
|
太康县
|
阿拉善盟
|
玉门市
|
南阳市
|
台中市
|
兴宁市
|
新和县
|
朝阳县
|
永兴县
|
金沙县
|
托里县
|
富裕县
|
郴州市
|
佛山市
|
星子县
|
鹰潭市
|
淮南市
|
双辽市
|
如东县
|