CSS3 圓弧框線樣式

CSS3 支援圓弧框線的效果設計，透過 border-radius 樣式可以輕易的進行實作。配置一個 <div> 標籤如下，其 id 識別名稱設定為 br ：

<div id="br"></div>

接下來設定此 <div> 標籤的樣式如下：

<style>

    div#br {

        border-radius:20px;

        width:400px;height:160px;

        background:#2d2d2d; }

</style>

其中指定 border-radius 樣式項目的值為 20px ，如此一來， <div> 區塊的四個角落便會以 20px 為半徑長度的圓弧呈現。

你也可以分別針對四個角獨立進行其專屬的圓弧效果設定，例如以下的設定：

div#br {  

    border-top-right-radius:60px ;

    border-bottom-right-radius:20px ;

width:400px;height:160px;

    background:#2d2d2d;

}

這一段樣式的第一行以及第二行，將呈現以下的效果：

與圓弧框線效果有關的樣式列舉如下：

樣式	說明
border-radius	設定四個圓弧角。
border- top-left-radius	設定左上圓弧角。
border-top-right-radius	設定右上圓弧角。
border-bottom-right-radius	設定右下圓弧角。
border-bottom-left-radius	設定左下圓弧角。

根據上述的設定方式，選擇所需的樣式項目進行設定即可。

繼續閱讀…