CSS3 支援圓弧框線的效果設計,透過 border-radius 樣式可以輕易的進行實作。配置一個 <div> 標籤如下,其 id 識別名稱設定為 br :
接下來設定此 <div> 標籤的樣式如下:
其中指定 border-radius 樣式項目的值為 20px ,如此一來, <div> 區塊的四個角落便會以 20px 為半徑長度的圓弧呈現。
<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 | 設定左下圓弧角。 |
根據上述的設定方式,選擇所需的樣式項目進行設定即可。
沒有留言:
張貼留言