5/31/2008

簡易的CSS彈性圓角邊框設定

彈性圓角邊框的傳統製作方式是利用 table 的 4 個角落各放一張圓角小圖, 再利用背景圖做上下左右 4 邊線條的伸縮效果, 在想避免使用 table 排版, 精簡原始碼的人眼中, 這種方式很多餘, 但又ㄧ直沒有更好的替代方式.

"101個您一定會遇到的問題與解答" 書中曾介紹 3 種製作彈性圓角的方式, 但都不十分理想:

第一種方式是用Firefox專用語法 –moz-border-radius 設定圓角邊框, 只有在 Firefox 瀏覽器可以看見圓角效果, IE 無效.

第二種方式是利用很多僅 1px 邊界設定差異的 <div> 包覆內容, 書中範例在內文上方用 9 個 <div>, 下方也用 9 個 <div> 才完成一個圓角邊框設定, 步驟繁複不說, 顯示的鋸齒效果也不太好.

第三種方式是先切好 4 張小圓角圖, 二張放 html 上, 二張放 css 背景裡面, 再用 class 設定圓角與邊線位置, 這不純是用 css 作成的, 比較像是傳統 table 方式的變身. 對還需要放 2 張圖在 html 上的做法不是很欣賞.

有ㄧ篇 Simple Rounded Corner CSS Boxes 是目前看起來最好的用法, 只用 4 個 class 和一張背景圖就完成圓角邊框設定, 而這張背景圖也允許有立體陰影等效果. 原文是做固定寬度 335px , 這邊我改為彈性寬度, 所以將 width: 335px 刪除, 也對內文與標題間距做點調整.

首先要設計一張夠大的圓角框背景圖 (寬 3200px, 應該沒有比這更寬的螢幕了, 高度也視需求製作), 如果要有陰影立體也直接畫好, 圖雖然大張, 但色階不多的話, 存成 jpg 或 png 也只有幾十 K 大小, 不必擔心檔案過大. 如果標題很長或可能有好幾行字, 可將標題區域高度做大一些, 讓文字有向下伸展空間. 然後再用 4 個 class 對同一張圖做標題及上下左右圓角顯示位置和間距的設定. 這方式不管是html或css設定都很簡潔, 效果可視需求做多元的變化.


Html範例如下:

<div class="cssbox">
<div class="cssbox_head"><h2>This is a header</h2></div>
<div class="cssbox_body">
<p>This is for your content. ... This is for your content.</p>
</div>
</div>

CSS設定如下:

/* 設定右下角圓角圖 */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(box.jpg) no-repeat bottom right;
}


/* 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.cssbox {
padding-right: 15px;
/* 底圖右邊緣間距 */
margin: 20px auto; /* 地圖上下左右邊界 */
}

/* 設定右上角圓角圖 */
.cssbox_head {
background-position: top right;
margin-right: -15px; /* 右上角底圖向上拉高 15px */
padding-right: 40px; /* 右邊間距 = 圖片間隙 + 內側間距 */
}

/* 設定左上角圓角圖 */
.cssbox_head h2 {
font-size: 120%;
background-position: top left;
margin: 0;
/* 邊界設定為 0*/
border: 0; /* 框線設定為 0 */
padding: 5px 0 5px 40px; /* 左側間距 = 圖片間隙 + 內側間距 */
height: auto !important;
height: 1%;
/* IE Holly Hack 修正 */
}

/* 設定左下角圓角圖 */
.cssbox_body {
background-position: bottom left;
margin-right: 25px;
/* 右邊間距 */
padding: 15px 0 15px 40px; /* 間距設定, 左側 40px 要與 .cssbox_head 相同 */
}


/* 內文與標題間距修改 */
.cssbox_body p {
margin-top: 0 ;
}

這是利用 cssbox 和 cssbox_body 做右下和左下圓角, .cssbox_head 和 .cssbox_head h2 做右上和左上圓角, 並針同一張圖的背景 (background-position) 做置左置右或靠上靠下設定. 所以 4 邊的 margin 和 padding 必需互相對稱搭配, 才能做出無縫隙, 上下左右均衡的圓角邊框.

好用的 "CSS彈性圓角邊框設定" 推薦給各位!


12 則留言:

壞掉的印表機 提到...

="= 阿姐你總算又復活啦~~BLOG太久沒更新快長菇拉~~

Jane 提到...

會嗎? 每個月至少有一篇說.

Ninthday 提到...

感謝~真是受惠良多,自己來研究看看!

ASWell 提到...

如果不要標題怎麼辦?把HTML標題那一行拿掉上邊框就不見了?css不是很懂說

Jane 提到...

這個css圓角製作為了保持程式碼的簡潔, 充分利用每個標籤(如h2)設定樣式. 如果不需要標題可將"This is a header"刪除, 但保留標籤, 例如
<div class="cssbox_head"><h2></h2></div>

但標題高度是由文字大小控制, 當沒有文字時高度會變小, 如果想撐開高度就再去設定 ".cssbox_head h2" 這組高度值, 例如原來高度為"auto"

height: auto !important;

請改為"25px" 或其他值

height: 25px !important;

這樣就能保留標題列, 又如果不想用<h2>包覆空的內容, 也可以將<h2>改用<div class="top">或其他class名稱取代

匿名 提到...

感謝版主熱心分享,關於這範例有點問題請教,
當Body內放了篇文章,在800x600 or 1024x768解析均顯現正常,一但視窗小於600時背景圖則會產生重複貼的狀況,不知是否我漏下了什麼呢?謝謝!:)

Jane 提到...

沒實際看到你的畫面, 猜想可能是螢幕寬度縮小時, 內容相對拉長而超過你所製作的背景圖高度.

如果內容很多或螢幕很寬, 就要製作夠長和夠寬的背景圖來伸展(我做過案例的背景圖約1600px x 1600px). 萬一內容需要無限延伸長度超過3個以上垂直捲軸的話, 這方法可能就不太合適.

匿名 提到...

看來這方法用於邊欄比較保險,
內容超過背景圖高度的確會產生問題,
搜尋了一下找到網友分享加上這段:
min-width: 650px;
width: auto !important;
width: 650px;

限制最小寬度,文章不長倒還好,
感謝您的回覆說明。:D~

KAI 提到...

感謝熱心分享~
剛好最近有這樣的需求

不過圖片若以PNG圖檔呈現
左上,右上跟左下會發生"互吃"的現象
(即左下角透明圓弧部分,會透出右下角的圖片)

不知做透明圓角邊框
是否有更佳的解決方案?

Jane 提到...

這個簡易圓角邊框可以想像成一扇向左右拉開的窗戶: 用一張背景圖設定不同顯示位置, 在四角框內包夾穿插, 如果圖片是透明的(png或gif), 就會在透明的那一角看見底層的圖片.

只能說這方法並不適合用透明圖檔做. 目前沒有更好的方法, 真的抱歉了!

KAI 提到...

感謝版主的熱心回覆~
果然PNG還是不太適合

不過後來我請教朋友
他給了我以下這段
http://code.google.com/p/scale9grid/
利用jQuery來輔助達成
彈性圓角邊框設定並支援PNG
效果很棒!!

可惜我看不懂code....
不過還是跟大家分享一下

匿名 提到...

我是新学的css
看不太懂呵呵~
嗯`
要好好研究研究.