可能你曾經聽過類似下面的言論：
「用css設計的站點往往是箱子般四四方方的，並且都是非常死板的稜角。有圓角邊框嗎？」
圓角設計現在就在這裡了。本篇教程中將示範如何完成乙個可以靈活應用於動態內容布局的「圓角邊框」。
●the markup
注意在下面的示例**中，xhtml 斷行標記「
」被嵌入樣本段落中。
程式**
a few paragraphs of article text.
a few paragraphs of article text.
a few paragraphs of article text.
a few paragraphs of article text.
a paragraph containing author information
●the hooks
如果我們需要完全控制頁面布局，就必須利用css來影響足夠多的元素：
首先，將整個文章的內容包含在乙個「div」容器內、並適當按主體內容、標題……分段包含於各自的"div"容器內。
程式**
a few paragraphs of article text.
a few paragraphs of article text.
a few paragraphs of article text.
a few paragraphs of article text.
a paragraph containing author information
從**中可以看出，至少需要5個「容器」類**，為了構成我們需要的圓角矩形，還需要做幾個圓角。
●the design
首先來看看最終的外觀：如圖2
「我需要邊界和拐角看起來和這個類似」，同時他告訴我們：「文章也許有不同的寬度和高度、而且他還不能肯定文章需要什麼樣的背景」，事實上、他也不能確定邊框到底是什麼樣式。「能否給我們提供一種便與修改的開放式方式來管理邊框呢？」他問到。
●the process
我們已經將整個文章包含於「div」內，應用於左上角、頂端和左邊。header元素是預設的塊級元素，我們將利用塊級元素「繼承」特性來設定寬度。使用元素控制右上角頁面布局。文章頁尾部分也使用了乙個「 div 」來確定布局包含的段落來確定右下角布局。
左、上以及左上角部分：
右邊以及右上角部分：
底部，以及左下角：
右下角部分：
右邊部分：
●the styles
程式**
div.article
div.article h2
div.articlebody
div.articlefooter
div.articlefooter p
從上圖中可以看到「類」：" articlebody "控制的「div」前後存在缺口(編者注：上下沒有緊密結合，有距離)。先忽略這個問題，繼續修改完善樣式表。
程式**
body
div.article
div.article h2
div.articlebody
div.articlefooter
div.articlefooter p
還好，比我們想像的要好，不過顯而易見，我們需要為各自元素新增「padding」，以保證邊框布局看起來更好一些。其次，上面提到的缺口問題也會得到解決。形成「缺口」的原因是插入「段落」時回車所至。應盡量避免使用<>元素從而繞過這個問題。
假定乙個回車符等於「1.5em」,相當於我們指定了「line-height」行高，因此我先為articlebody和articlefooter容器設定 margin-top:-2em;。測試結果是大多數標準瀏覽器中都能正確地顯示，
至於為什麼設定 margin-top:-2em;，這個數值是經過不斷的測試調整之後確定的。
繼續完善樣式表:
程式**
div.article
div.article h2
div.articlebody
div.articlefooter
div.articlefooter p
●backward compatibility?
向後相容性：如果使用 netscape 4.x 瀏覽器觀察這個例子的話，你會注意到頁面露出一點空白。還沒有什麼好辦法解決這個問題，ns 4.x 不能解釋類似 media = " all "，所以，一種代替的解決方案是隱藏不能被瀏覽器正確執行的式樣，，儘管這個方法比較麻煩，例如將字型大小規範從 ems 改為 pxs 。如果你需要向後相容，就必需這麼做。
●the real world
真實的世界：「yeah，但是我們想要看真實的應用」，我們預先考慮到這個問題並提供了乙個結構關係更加複雜的示例圖
CSS3圓角邊框
本文介紹border radius的使用 應用 特殊圓形的製作等！1.水平和垂直半徑一樣 border radius只設定乙個值 四個圓角相同 border radius設定兩個值 斜對角相同 border radius設定三個值 top right和bottom left相同 border rad...
CSS3圓角邊框
圓角 border radius border radius 左上 右上 右下 左下 即border radius 10px 20px 30px 40px 的結果為 左上 border top left radius 10px 等價於border radius 10px 0 0 0 右上 borde...
邊框四周加角樣式
要完成上面乙個邊框四周加上角樣式。css部分 border lefttop border righttop border leftbottom border rightbottom html部分 class border lefttop div class border righttop div c...