1. 簡易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彈性圓角邊框設定” 推薦給各位!

2. 產生圓角圖形

Related posts:

1. Finding freelance web design
2. 我想索取網站設計的報價, 需要提供甚麼資料?
3. Website-Freelance.com professional website design
4. 塗鴉風格網頁layout規畫工具：Balsamiq Mockups