可能你曾經(jīng)聽過類似下面的言論：
“用CSS設(shè)計的站點往往是箱子般四四方方的，并且都是非常死板的棱角。有圓角邊框嗎？”
圓角設(shè)計現(xiàn)在就在這里了:)。本篇教程中將示范如何完成一個可以靈活應(yīng)用于動態(tài)內(nèi)容布局的“圓角邊框”。
●The markup
注意在下面的示例代碼中，XHTML 斷行標(biāo)記“<br />”被嵌入樣本段落中。
<h2>Article header</h2>
<p> A few paragraphs of article text.<br />
A few paragraphs of article text. </p>
<p> A few paragraphs of article text.<br />
A few paragraphs of article text. </p>
<p> A paragraph containing author information </p> |
●The hooks
如果我們需要完全控制頁面布局，就必須利用CSS來影響足夠多的元素：
首先，將整個文章的內(nèi)容包含在一個“div”容器內(nèi)、并適當(dāng)按主體內(nèi)容、標(biāo)題……分段包含于各自的"div"容器內(nèi)。
<div class="Article">
<h2>Article header</h2>
<div class="ArticleBody">
<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>
<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>
</div>
<div class="ArticleFooter">
<p>
A paragraph containing author information
</p>
</div>
</div>
|
從代碼中可以看出，至少需要5個“容器”類代碼，為了構(gòu)成我們需要的圓角矩形，還需要做幾個圓角圖片。
●The design
首先來看看最終的外觀：如圖2
“我需要邊界和拐角看起來和這個類似”，同時他告訴我們：“文章也許有不同的寬度和高度、而且他還不能肯定文章需要什么樣的背景”，事實上、他也不能確定邊框到底是什么樣式。“能否給我們提供一種便與修改的開放式方式來管理邊框呢？”他問到。
●The process
我
們已經(jīng)將整個文章包含于“DIV”內(nèi)，應(yīng)用于左上角、頂端和左邊。Header元素是默認(rèn)的塊級元素，我們將利用塊級元素“繼承”特性來設(shè)置寬度。使用
<h2>元素控制右上角頁面布局。文章頁腳部分也使用了一個“ div ”來確定布局包含的段落來確定右下角布局。
左、上以及左上角部分：
右邊以及右上角部分：
底部，以及左下角：
右下角部分：
右邊部分：
●The styles
接下來, 為包含整個文章的DIV容器設(shè)置邊框和相對寬度：
div.Article {
width:35%;
border: 1px solid red; }
div.Article h2 {
border: 1px solid blue; }
div.ArticleBody {
border: 1px solid black; }
div.ArticleFooter {
border: 1px solid blue; }
div.ArticleFooter p {
border: 1px solid magenta; }
|
從上圖中可以看到“類”：" ArticleBody "控制的“DIV”前后存在缺口(編者注：上下沒有緊密結(jié)合，有距離)。先忽略這個問題，繼續(xù)修改完善樣式表。
以下是引用：
body {
background: #cbdea8;
font: 0.7em/1.5 Geneva, Arial, Helvetica, sans-serif;
}
div.Article {
background:
url(images/custom_corners_topleft.gif)
top left no-repeat;
width:35%;
}
div.Article h2 {
background:
url(images/custom_corners_topright.gif)
top right no-repeat;
}
div.ArticleBody {
background:
url(images/custom_corners_rightborder.gif)
top right repeat-y;
}
div.ArticleFooter {
background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
} |
還好，比我們想像的要好，不過顯而易見，我們需要為各自元素添加“padding”，以保證邊框布局看起來更好一些。其次，上面提到的缺口問題也會得到解決。形成“缺口”的原因是插入“段落”時回車所至。應(yīng)盡量避免使用<P>元素從而繞過這個問題。
假定一個回車符等于“1.5em”,相當(dāng)于我們指定了“line-height”行高，因此我先為ArticleBody和ArticleFooter容器設(shè)置 margin-top:-2em;。測試結(jié)果是大多數(shù)標(biāo)準(zhǔn)瀏覽器中都能正確地顯示，
至于為什么設(shè)置 margin-top:-2em;，這個數(shù)值是經(jīng)過不斷的測試調(diào)整之后確定的。
繼續(xù)完善樣式表:
以下是引用：
div.Article {
background:
url(images/custom_corners_topleft.gif)
top left no-repeat;
width:35%;
}
div.Article h2 {
background:
url(images/custom_corners_topright.gif)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
}
div.ArticleBody {
background:
url(images/custom_corners_rightborder.gif)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleFooter {
background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
} |
●Backward compatibility?
向后兼容性：如果使用 Netscape 4.x 瀏覽器觀察這個例子的話，你會注意
到頁面露出一點空白。還沒有什么好辦法解決這個問題，NS 4.x 不能解釋類似 media = " all "，所以，一種代替的解決方案是隱藏不能
被瀏覽器正確執(zhí)行的式樣，，盡管這個方法比較麻煩，例如將字體大小規(guī)范從 ems 改為 pxs 。如果你需要向后兼容，就必需這么做。
●The real world
真實的世界：“Yeah，但是我們想要看真實的應(yīng)用”，我們預(yù)先考慮到這個問題并提供了一個結(jié)構(gòu)關(guān)系更加復(fù)雜的示例圖
●Limitations
局限性：如果你注意的話，利用這種方法，需要提供合適的左上角/右上角……圖形。如果右上角圖片是透明的，那么在它之下的左上角圖片就會顯示出來，同理底部也一樣。
另外一個利用CSS構(gòu)建圓角矩形的實例：
(英文網(wǎng)站)
http://www.vertexwerks.com/tests/sidebox/