CSS 圓角技術

CSS 圓角,可以說是一個相當煩人的東西,雖然圖檔比較容易,但是這篇文章不討論使用圖檔製作圓角的方法,而是使用純粹的CSS。

之所以說他煩人,是因為為了弄圓角而搞出一堆垃圾標籤,實在是非常不符合HTML結構化和語意化的精神,不過短期間,還沒有相當簡潔又完美的處理方式,忍耐一下吧!

《方法一》
這個方法可以說是很老土,但是卻非常有用,不管去哪個瀏覽器都可以正確顯示,如果你對於跨瀏覽器相當堅持,這個方法可以滿足你對不同瀏覽器的需求,這張圖,就是呈現出來的效果,不管哪個瀏覽器都一樣。

css_t1.gif

HTML 程式碼
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
這是圓角測試
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
CSS 程式碼
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block; background:#999933;}
.b1f {height:1px; margin:0 5px;}
.b2f {height:1px; margin:0 3px;}
.b3f {height:1px; margin:0 2px;}
.b4f {height:2px; margin:0 1px;}
.contentf {background:#999933; padding-left:15px; color:#FFFFFF}

換個背景色,讓大家看看這串程式碼的原理:

css_t2.gif

其實,他只是利用不同線段長來造成曲線的效果,這也是為什麼我說他老土的理由;因為如果你的曲線幅度很大,為了要製造更多的線段,你就得多增加很多多餘的區塊,平白無故的為了視覺排版效果而放了一堆垃圾碼進去,說實在的,實在是個很糟糕的作法,這跟表格排版有什麼不同?可是我們還是常常使用它,因為它還是不失為一個解決圓角問題相當好的方法。

那如果我想使用這個方法來幫原角區塊加上邊框呢?請把CSS改成下面的樣子:
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block; background:#FFCCCC; border-right:1px solid #CC6666; border-left:1px solid #CC6666;}
.b1f {height:1px; margin:0 5px; background:#CC6666;}
.b2f {height:1px; margin:0 3px; border-right-width:2px; border-left-width:2px;}
.b3f {height:1px; margin:0 2px;}
.b4f {height:2px; margin:0 1px;}
.contentf {background:#FFCCCC; padding-left:15px; color:#FFFFFF; border-right:1px solid #CC6666; border-left:1px solid #CC6666;}

你可以看到我在.b2f 的地方讓他左右的border多了1px,這是為了圓角能夠和.b1f接得比較圓順,如果你容忍有小洞洞出現,其實不用加這一行也沒關係,我只是覺得這樣比較順眼而已。

根據這個原理,你可以任意延伸變化,下面就是幾個例子及對應的程式碼:

變化 A –

css_t4.gif

這個程式碼是把標題及摘要合在一起,原始範例來自於 CSS Round Corners

HTML 程式碼
<b class="b1f"></b><b class="b2f head"></b><b class="b3f head"></b><b class="b4f head"></b>
<div class="head">
<h1>CSS 圓角練習</h1>
</div>
<div class="content">
這是圓角練習的文章內容及範例
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
CSS 程式碼
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block; background:#FFCCCC; border-right:1px solid #CC6666; border-left:1px solid #CC6666;}
.b1f {height:1px; margin:0 5px; background:#CC6666;}
.b2f {height:1px; margin:0 3px; border-right-width:2px; border-left-width:2px;}
.b3f {height:1px; margin:0 2px;}
.b4f {height:2px; margin:0 1px;}
.head {background:#D55757;}
div.content, div.head{ padding-left:15px; color:#FFFFFF; border-right:1px solid #CC6666; border-left:1px solid #CC6666;}
div.head h1 {margin:0px; background:#D55757; font-size:22px;}
.content {background:#FFCCCC; padding-top:5px;}

變化 B:
這個變化是拿迷你窩的標題圖做範例而設計的,將原本的Banner改成以CSS來呈現,這個例子的缺點是圓角的部分沒有辦法呈現成迷你窩那種弧度很大的漂亮圓角,雖然不是沒有解決方法,但是因為會讓程式碼離開原程式太遠,所以就暫時不在這裡做介紹,下面的程式碼弄出來就是圖檔所顯示的樣子,後面我們會解釋選擇CSS方案的理由與優點。

css_t7.gif

HTML 程式碼
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="bar">
<img src="tmp image/mini_logo1.gif"><h1>小記者現場直擊 |<span class="sub">八卦新聞一把抓</span></h1>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
CSS 程式碼
.b1f, .b2f, .b3f, .b4f, .b5f, .b6f{font-size:1px; overflow:hidden; display:block; background:#FE9AA1; border-right:1px solid #CC6666; border-left:1px solid #CC6666;}
.b1f {height:1px; margin:0 6px; background:#CC6666;}
.b2f {height:1px; margin:0 4px; border-right-width:2px; border-left-width:2px;}
.b3f {height:1px; margin:0 3px;}
.b4f {height:2px; margin:0 1px;}
div.bar {background:#FE9AA1; padding:0px 15px;border-right:1px solid #CC6666; border-left:1px solid #CC6666;}
div.bar h1 {margin:0px; font-size:18px; padding-left:75px; color:#FFFFFF; height:20px; background-image:url(tmp image/mini_mark_1.gif); background-repeat:no-repeat; background-position:right center;}
div.bar h1 span{font-size:14px; margin-left:10px;}
div.bar img{margin-top:-25px; float:left; position:absolute;}

當然,可以確定的是,對設計師而言,畫一張圖壓縮完後輸出感覺起來比較容易,但是如果去深入考慮網頁大小以及網頁最佳化,CSS顯然有著比較好的解決方案,粗略測試一下,發現如果使用圖檔的方式,單純網頁+圖檔,大小約在6.87kb(也就是7044位元組)左右;而使用CSS的解決方式,網頁+圖檔的大小則是3.79kb(3886位元組),整體差距將近2倍,而CSS的部份,我並沒有在圖檔及程式碼上做到最佳化的動作。單一圖檔或者只有差不到兩倍的大小,然而這樣的差距,卻會隨著圖檔的增加而不斷拉大,因為CSS可以藉由增加一點點的程式碼而達到整體性的改變,但是圖檔卻不能。另外不能否認的優點是,一旦標題字想要做出改變,CSS可以輕而易舉的修改,但是圖檔卻只能重新壓縮輸出,這也是兩者間不同的地方,易於統一維護一向是CSS排版不可輕忽的最大優勢。

但是CSS的解決方案並非完全沒有缺點,特殊字體的顯示能力不如圖檔,線條的細膩度也不如圖檔,因此在做網頁設計的時候,設計師必須藉由自己的專業去評估哪種方案才是最適合網站本身的,什麼地方可以妥協,什麼地方必須堅持,我想台灣的網頁設計師不應該低估網頁設計所要考慮的範圍層面。

《方法二》
第二個方法是利用實心圓符號製造出圓角效果,但是這種作法的缺點是不能夠使用外框線,而且跨瀏覽器的解決方案比前一個麻煩許多,或者是因為我對CSS了解不夠深,所以才會搞出一堆程式碼,有空再想想看是不是有更好的作法。

這個方法原來是來自於 Curved Corners 的範例,不過這個範例只有在IE6底下才能完全正常顯示(請見下圖),FF則是版型略微跑掉,而Opera則變成了畸形的凹角(到現在還是想不通是怎麼搞出凹角的,大概是符號本身的解讀問題吧!),因此我重新修改了一下,讓這三個瀏覽器都能夠正常顯示,程式碼如下:

css_t5.gif

HTML 程式碼:
<div class="curvy">
<div class="cur_t"><b class="cur_l"><span>●</span></b><b class="cur_r"><span>●</span></b></div>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
<div class="cur_b"><b class="cur_l"><span>●</span></b><b class="cur_r"><span>●</span></b></div>
</div>
CSS 程式碼:
.curvy {width:300px; background-color:#9CAF9C; color:#333333; margin:5em auto;}
b {overflow:hidden; height:20px; width:20px; z-index:2; position:relative;}
span{font-size:82px; color:#9CAF9C; background-color:#FFFFFF; line-height:0.6em; z-index:2; position:relative; display:block}
b.cur_l{ margin-left:0px; float:left;}
b.cur_r{ margin-right:0px; float:right;}
b.cur_l span{ margin-left:-7px;}
b.cur_r span{ margin-left:-22px;}
div.cur_t b span{ margin-top:-9px;}
div.cur_b b span{ margin-top:-29px;}
.curvy p {padding:25px 10px; font-size:14px; margin-bottom:-16px; z-index:100; position:relative; }
/* IE Fix */
*html b{ background-color:#FFFFFF; overflow:hidden;}
*html span{font-size:50px;}
*html b.cur_l span{ margin-left:-3px;}
*html b.cur_r span{ margin-left:-28px;}
*html div.cur_t b span{ margin-top:12px;}
*html div.cur_b b span{ margin-top:-12px;}
*html .curvy p {margin-bottom:0px;}
/* Opera Fix */
html:first-child span{font-size:50px;}
html:first-child b.cur_l span{ margin-left:-4px;}
html:first-child b.cur_r span{ margin-left:-27px;}
html:first-child div.cur_t b span{ margin-top:-5px;padding-top:12px;}
html:first-child div.cur_b b span{ margin-top:-22px;padding-bottom:7px;}
html:first-child .curvy p {margin-bottom:-15px;}

我想程式碼應該還有不少改進的空間,以後再慢慢更新吧!下面就是修改以後三個瀏覽器所呈現的樣子(我沒有測IE7,所以並不清楚這個程式碼是否可以在IE7上面正常顯示)

css_t6.gif

沒有哪個做法比較好,因為這完全視各個網站的需求,但我認為,網站設計師不應該如同在做平面設計一樣,吹毛求疵的要求每個地方都必須分毫不差,因為除非你的網站全部都是使用圖檔製作,不然無論到哪裡都長一樣的網頁是無法做到的,因為使用者只要對自己的瀏覽器更改了設定,整個版面就會變得不一樣。網站設計師該做的應該是讓網站在各種閱讀工具之下都能讓使用者順利的閱讀網站內容,不至於受到外在環境的影響,貼心的幫使用者考慮到頻寬、閱讀方便性、不同瀏覽器等問題,然後適度的容忍自己的設計看起來不太一樣或是有點不完美,我想,這才是網站設計師應該考慮層面。

網站設計所要考慮的不是只有視覺上的美感,還必須全面的考慮到網站的效能、後續維護方便、程式碼的結構、以及跨平台的使用問題,這不是程式設計師的工作,而是每個網站設計師都應該深入去思考的細節,如果你還停留在只考慮視覺感受,充其量你只是個網頁美術或是網頁美工,並不能稱之為網站設計師,所謂的設計,必須站在所有使用者的立場來思考,只能給IE用或是只能給FF用的網站都不能算是個好網站。

一個網站如果抱持著「我們就是只支援IE,其他瀏覽器不支援」,那你們的心態跟自私鴨霸的M$有什麼不同?提供服務還要要求使用者使用特殊瀏覽器?拜託,IE又沒有付你們錢,何必要這樣子倒貼他們?更何況這世界上好網站比比皆是,你做不到支援所有瀏覽器,我就改去支援我瀏覽器的網站使用,對我來講有差嗎?這就是為什麼我就是愛在Wordpress發表長篇大論,因為不管什麼瀏覽器,都可以快快樂樂的使用,本人最討厭網站自己有問題還跟要我換用IE,然後還順便嘲諷一下說我們也不過是小眾市場,不值得他們take care,靠…真是一群喝IE奶長大的傢伙。

講到這個,就忍不住一肚子火,這個台灣雅虎,你的破爛登入介面能不能不要在Opera下面就開始躁鬱症發作拼命reload啊?看了真叫人想叉你網頁。

Advertisements

5 thoughts on “CSS 圓角技術

  1. 講到這個,就忍不住一肚子火,雞的台灣雅虎,你的破爛登入介面能不能不要在Opera下面就開始躁鬱症發作拼命reload啊?看了真叫人想叉你網頁。

    提供服務還要要求使用者使用特殊瀏覽器?拜託,IE又沒有付你們錢,何必要這樣子倒貼他們?更何況這世界上好網站比比皆是,你做不到支援所有瀏覽器,我就改去支援我瀏覽器的網站使用

    = = 請問 那你何必還開 yahoo 然後氣的要死呢??

    Opera FireFox 也沒付錢給你呀 XD

    =====================================
    呵 沒特別的意思
    小弟是網頁工作者

    有時為了 一些畫面問題 也常常非常苦惱如何能在不同平台呈現
    真是非常的累ㄚ XD

    希望css3 快點被支援
    那寫圓角 就簡單多嚕

  2. 哈哈哈!其實我也是不得已的,因為我的帳號有些東西就是無法完全轉成美國雅虎,我已經連個人資料的國家都改成美國了,還是沒辦法完全轉過去~另外一個原因就是包括台灣雅虎的家族和部落格等服務,因為工作關係要上去看,也非得登入。最後,那個線上購物也是一樣,用Opera跟FF就是會不正常,這實在是很討厭又不能夠避免,所以只好最近慢慢改成到PChome買東西吧~:P

    不過,我也跟你一樣期待CSS3快點出來哩~

  3. Pingback: CSS-圓角技術作法 資源 « 網路人‧觀察與學習

  4. Pingback: CSS 圓角技術 « 資訊與工作

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s