CSS3 圓角 border-radius

CSS3 圓角 border-radius 用來設定區塊的圓角效果,可以一次設定四個圓角的值,也可以分別對各個圓角設定不同的値。

基本語法

border-radius:圓角值;


在此基本語法範例中,圓角值可以自行設定,馬上來看一個簡單範例

<div style="border:2px #ccc solid;border-radius:10px;width:360px;height:60px;background-color:#eee;">CSS3 border-radius 圓角範例</div>


呈現結果
CSS3 border-radius 圓角範例

此範例我們設定了 border-radius:10px 這樣的圓角值(紅色部分),而且四個角都是一樣的效果呈現,另外我們還使用了其它的語法,像是 DIV 的 width(寬度)、height(高度)、background-color(背景顏色)與 border(邊框)等,目的僅是要讓範例呈現明確的效果而已,大部分的應用看到這裡應該就夠用了,但如果你需要進一步,分別設定四個角不同的値也可以。

四個角的語法
  • border-top-left-radius - 設定左上角
  • border-top-right-radius - 設定右上角
  • border-bottom-right-radius - 設定右下角
  • border-bottom-left-radius - 設定左下角
在 CSS3 圓角設定的時候,可以採用的値有 % 或是長度單位,請自行嘗試看看。

延伸閱讀
CSS border 屬性介紹與範列
CSS border-width 邊框寬度應用
CSS border-color 屬性與用法範例
CSS border-style 邊框樣式屬性介紹與範例
CSS background 背景屬性介紹
CSS background-color 屬性與用法介紹
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C