最近的網頁常常看到這樣子的設計, 從原本看起來比較僵硬冰冷的直角改成圓角, 就像上圖那樣子, 看起來圓滑許多.
早期總是開個繪圖軟體把範圍量好, 做成一大張圖, 然後用一堆的表格把範圍隔出來, 這往往一個圖文色彩並茂的網頁, 也相對沉重的讓人在開啟時失了耐性. 上面這張圖示以一堆的容器 (div) 和一堆的 css 寫出來的, 事實上圖片的部份只有那四個小圓角 (16*16 像素的 png 圖檔), 所以整體來說, 1 個 html 檔加上 4 個小圖, 這樣子也不過 6 k 的大小, 不管對哪種的連線速度, 都可以在很短的時間內將網頁開啟完成.
在我所剩不多的大腦容量中, 還記得曾經用在過去的 blog 中, 有個 css 的參數可以直接做到圓角, 不過卻只能在其中一款瀏覽器中呈現, 用沒幾天就拿掉那個設定了.
所以, 我終於也學會用一堆的 div 來堆積木了.
圓角的作法: (以 photoimpact 為例)
- 開一個 32*32 的空白矩形, 底色為白色. (上圖最大的 div 容器背景色為白色)
- 畫一個圓形, 大小也是 32*32.
- 以選取工具, 設定固定大小為 16*16
- 選取 1/4 的圓, 拉出來另外成圖檔
- 再以調整工具翻轉, 依序轉出左上, 左下, 右上, 右下四個角度.
- 分別存成 4 個個別的檔案.
HTML 的部份
<body>
<div id="main">
<div class="superheaderWrapper">
<div class="superheader">index | contact</div></div>
<div class="header"><h1>This is title -- HEADER</h1></div>
<div class="subheaderWrapper">
<div class="subheader">Page 1 | Page 2 | Page 3</div></div>
</div>
</body>
CSS 的部份
| body | margin: 1ex;
background-color: #dee6b1;
padding-right: 0px;
padding-left: 0px;
font-size: 73%;
padding-bottom: 0px;
padding-top: 0px;
font-family: verdana, helvetica, arial, sans-serif |
| #main | background-color: #ffffff;
padding: 1ex;
margin: 20px auto;
width: 450px |
| .superheaderWrapper | background: url(left_top.png) #a1a85e no-repeat left top;
margin-top: 0;
margin-bottom: 0 |
| .superheader | background: url(right_top.png) no-repeat right top;
text-align: right;
color: #ffffff;
font-weight: bold;
padding-right: 5ex;
margin-top: 0;
margin-bottom: 0 |
| .header | background-color: #babe71;
color: #fffae7;
font-family: trebuchet ms;
margin-top: 0;
margin-bottom: 0;
padding: 1ex |
| .subheaderWrapper | background: url(left_bottom.png) #a1a85e no-repeat left top;
margin-top: 0;
margin-bottom: 0 |
| .subheader | background: url(right_bottom.png) no-repeat right top;
color: #ffffff;
font-weight: bold;
padding-left: 5ex;
margin-top: 0;
margin-bottom: 0
font-family: verdana; |
參照的網頁
字體：小 中 大
