首頁 > web前端 > css教學 > borderradius什麼意思? border radius屬性詳解

borderradius什麼意思? border radius屬性詳解

云罗郡主
發布: 2018-11-10 14:42:19
原創
17310 人瀏覽過

對於很多css高手來說,borderradius應該不是很陌生,但是對於一些小白對borderradius屬性並不是那麼熟悉,那麼borderradius什麼意思?下面我們來講述一下border radius屬性。

一:borderradius什麼意思

我們在製作網站的時候,總是會遇到網站圓角的效果,我們從使用者的角度出發,使用圓角可以讓網站更美觀漂亮,然而在css2中,實現圓角的效果是一件很頭疼的事情,其實最老的辦法就是透過背景來實現,但是製作起來也是很麻煩的,現在,在css3中,我們可以使用border-radius屬性來實現圓角,從而減少了實現圓角效果遇到的問題。 【推薦閱讀:如何使用CSS的border屬性畫個三角形

很多人開發網站,都不太喜歡使用圖片,盡量保持能用css圖片就不去使用圖片,如果網站有很多圖片的話,會導致網站需要發送fttp請求,並且傳輸也是很大的,那麼就可以使用border-radius屬性去給圖片添加圓角,達到美觀的效果。

二:border radius屬性詳解

1.border radius語法:

border-radius:長度值;

#長度數值可以用px表示,也可以用百分比表示,例如:

<!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:20px;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>
登入後複製

顯示效果如下:

borderradius什麼意思? border radius屬性詳解

說明:以上程式碼中,border-radius的值為20,是指四個角落都是20。

2.border-radius的寫法

在css中很多屬性都是由四種寫法,類似於margin和padding,當我們border-radius屬性設定為一個值的時候,就代表四個角圓角半徑都是10px.

當border-radius為兩個值的時候,例如border-radius:10px 20px,其中10px就表示左上角和右下角,20px就表示右上角和左下角。

當border-radius屬性有三個值的時候,比如說,border-radius:10px 20px 30px;其中10px就是表示左上角半徑,20px表示左下角和右上角,30px就表示右下角。如果是四個數值的時候,依序為左上角、右上角、右下角和左下角,方向是依照順時針方向。

以上就是對borderradius什麼意思? border radius屬性詳解的全部介紹,如果你想了解更多有關CSS3教程,請關注php中文網。


以上是borderradius什麼意思? border radius屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板