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
設定左下圓弧角。

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


沒有留言: