DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 7.2 圓角border-radius屬性
7.2 圓角border-radius屬性
編輯:CSS3基礎     

一、border-radius屬性

我們在很多網站包括 學習網都經常能看到圓角的效果。從用戶體驗和心理來說,圓角效果往往更為美觀大方。

 學習網導航圓角效果
在線工具圓角效果

在CSS2.1中,給元素實現圓角效果是很頭疼的一件事。老辦法都是使用背景圖片來實現,制作起來相對的麻煩。但是CSS3中border-radius屬性的出現,完美地解決了圓角效果難以實現的問題。

此外,在前端開發中,對於網頁設計,我們都是秉著“盡量少用圖片”的原則,能用CSS實現的效果,就盡量不要使用圖片。因為圖片需要引發http請求,並且傳輸量大,影響網頁加載性能。就像 學習網教程文章下方的這些小圖標都是使用“自定義小圖標字體”來實現,而不是使用圖片來實現。在CSS進階教程,我們有機會再給大家詳細探討一下“自定義小圖標字體”的技巧。

在CSS3中,我們可以使用border-radius屬性為元素添加圓角效果。

語法:

border-radius:長度值;

說明:

長度值可以是px、百分比、em等。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius屬性</title>
    <style type="text/css">
    #div1
    {
        width:100px;
        height:50px;
        border:1px solid gray;
        border-radius:10px;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

“border-radius:10px;”指的是元素四個角的圓角半徑都是10px。

二、border-radius屬性值的4種寫法

跟border、padding、margin等屬性類似,對於圓角border-radius也有4種寫法。

1、border-radius設置1個值

當border-radius設置1個值時,例如“border-radius:10px;”表示4個角的圓角半徑都是10px。

2、border-radius設置2個值

當border-radius設置2個值時,例如“border-radius:10px 20px;”表示左上角和右下角的圓角半徑是10px,右上角和左下角的圓角半徑都是20px。

3、border-radius設置3個值

當border-radius設置3個值時,例如“border-radius:10px 20px 30px;”表示左上角圓角半徑是10px,左下角和右上角圓角半徑都是20px,右下角圓角半徑是30px。

4、border-radius設置4個值

當border-radius設置4個值時,例如“border-radius:10px 20px 30px 40px;”表示左上角、右上角、右下角和左下角的圓角半徑依次是10px、20px、30px、40px。

這裡的“左上角、右上角、右下角和左下角”,大家按照順時針方向記憶就記住了。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius屬性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid red;
        border-radius:10px 20px 30px 40px;
        background-color:#FCE9B8;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

大家可以在上面的在線測試中改變屬性值來方便查看當border-radius屬性設置不同值的效果。

此外,雖然本人在Web開發時間不是很久,但是根據自己經驗而言,border-radius屬性一般都是使用一個值的居多,有誰設計圓角的時候,四個圓角都搞得不一樣(用得著那麼花哨麼= =!?)。

三、border-radius畫實心半圓和實心圓

1、實心半圓

實心半圓分為:實心上半圓、實心下半圓、實心左半圓、實心右半圓。我們只要掌握制作一個方向的實心半圓的方法,其他方向的實心半圓就可以輕松實現,因為原理都一樣。

假如我們要制作實現上半圓,實現方法:把高度(height)設為寬度(width)的一半,並且只設置左上角和右上角的圓角半徑與元素的高度一致,而右下角和左下角的圓角半徑設置為0。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius屬性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid red;
        border-radius:100px 100px 0 0;
        background-color:#FCE9B8;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

border-radius屬性值是圓角的半徑,大家結合圓和矩形的數學知識,稍微想一想就知道實現半圓實現原理究竟是怎樣了。

此外,請大家根據上面的例子自行研究如何實現其他方向的實心半圓,把你的制作效果或代碼在下方評論分享給大家吧。

2、實心圓

在CSS3中,使用border-radius屬性實現實心圓方法:把寬度(width)與高度(height)值設置為一致(也就是正方形),並且四個圓角值都設置為它們值的一半。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius屬性</title>
    <style type="text/css">
    #div1
    {
        width:100px;
        height:100px;
        border:1px solid red;
        border-radius:50px;
        background-color:#FCE9B8;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

站長推薦:下面是 論壇的一個版主Balrogs小濤使用border-radius屬性制作的哆啦A夢,這小子使用一個圓角屬性就“走遍”了天下。有興趣的同學可以去下載源碼看看。

CSS3圓角實現哆啦A夢

源碼地址:純CSS3實現哆啦A夢

四、border-radius屬性派生子屬性

border-radius屬性可以分開,分別為四個角設置相應的圓角值,分別是:

(1)border-top-right-radius:右上角;

(2)border-bottom-right-radius:右下角;

(3)border-bottom-left-radius:左下角;

(4)border-top-left-radius:左上角;

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved