溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3中設(shè)置圓角邊框的樣式有哪些

發(fā)布時(shí)間：2021-12-16 12:07:39 來(lái)源：億速云 閱讀：443 作者：小新 欄目：web開發(fā)

這篇文章主要為大家展示了“css3中設(shè)置圓角邊框的樣式有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css3中設(shè)置圓角邊框的樣式有哪些”這篇文章吧。

樣式為：1、“border-radius:半徑值;”；2、“border-radius:半徑值 半徑值;”；3、“border-radius:半徑值 半徑值 半徑值;”；4、“border-radius:半徑值 半徑值 半徑值 半徑值;”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

圓角邊框

一、border-radius屬性簡(jiǎn)介

為元素添加圓角邊框，可以對(duì)元素的四個(gè)角進(jìn)行圓角設(shè)置（屬性不具有繼承性）

二、border-radius定義方法

border-radius屬性有兩種定義方法：border-radius可以一次性對(duì)四個(gè)角設(shè)置相同的值(簡(jiǎn)寫屬性)，也可對(duì)4個(gè)角分別設(shè)置圓角樣式(單獨(dú)屬設(shè)性置)。

（一）單獨(dú)屬性設(shè)置

border-radius：同時(shí)設(shè)置四個(gè)邊框的圓角樣式；

  • border-top-left-radius：設(shè)置左上角邊框的圓角樣式；

  • border-top-right-radius：設(shè)置右上角邊框的圓角樣式；

  • border-bottom-left-radius：設(shè)置左下角邊框的圓角樣式；

  • border-bottom-right-radius：設(shè)置右下角邊框的圓角樣式；

注意【邊框的順序不能打亂，比如border-top-left-radius就不可以寫成border-left-top-radius 屬性是固定的?！?/p>

css3中設(shè)置圓角邊框的樣式有哪些

通過(guò)實(shí)際操作可以看出二者表達(dá)效果是相同的。

css3中設(shè)置圓角邊框的樣式有哪些

（二）簡(jiǎn)寫屬性

為border-radius設(shè)置四個(gè)參數(shù),要注意順序關(guān)系

1、為屬性只設(shè)置一個(gè)值，四個(gè)邊框的圓角都采用相同的值

  border-radius：20px     //四個(gè)邊框圓角為20px

css3中設(shè)置圓角邊框的樣式有哪些

2、為屬性設(shè)置兩個(gè)值，第一個(gè)值設(shè)置左上角和右下角，第二個(gè)值設(shè)置右上角和左下角

border-radius: 20px 50px    //左上角和右下角20px，右上角和左下角50px

css3中設(shè)置圓角邊框的樣式有哪些

3、為屬性設(shè)置三個(gè)值，第一個(gè)值設(shè)置給左上角，第二個(gè)值設(shè)置給右上角和左下角，第三個(gè)值設(shè)置給右下角

border-radius: 20px 50px 5px  //左上角20px，右上角和左下角50px，右下角5px

css3中設(shè)置圓角邊框的樣式有哪些

4、為屬性設(shè)置四個(gè)值，第一個(gè)值設(shè)置給左上角，第二個(gè)值設(shè)置給右上角，第三個(gè)值右下角，第四個(gè)值左下角（按照順時(shí)針?lè)较颍?/p>

border-radius: 20px 50px 5px 100px  //左上角20px，右下角50px，右下角5px ，左下角100px

css3中設(shè)置圓角邊框的樣式有哪些

三、分別設(shè)置水平半徑和垂直半徑

border-radius的語(yǔ)法

border-radius: {1-4} length /%  /  {1-4} length /%;

border-radius: 20px 10px 40px / 25px 30px

length 定義圓角的形狀；%  以百分比定義圓角的形狀；{1-4} border-radius的參數(shù)個(gè)數(shù)范圍為1~4個(gè)

注釋【按此順序設(shè)置每個(gè) radii(半徑)的四個(gè)值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。

border-radius的參數(shù)個(gè)數(shù)范圍為1~4個(gè)，這里要注意水平半徑和垂直半徑的分別使用時(shí)：在border-radius中先設(shè)置4個(gè)邊角的水平半徑再設(shè)置4個(gè)邊角的垂直半徑?！?/p>

實(shí)例：

div{border-radius: 20px 5px 100px/15px 30px;}

等價(jià)于

div{ border-top-left-radius: 20px 15px;
       border-top-right-radius: 5px 30px;
       border-bottom-right-radius: 100px 15px;
       border-bottom-left-radius: 5px 30px;
    }

表達(dá)效果
css3中設(shè)置圓角邊框的樣式有哪些

四、應(yīng)用

使用border-radius創(chuàng)建圓形

輸入border-radius：r，這里的r元素的半徑大?。ㄓ虚L(zhǎng)度單位），要?jiǎng)?chuàng)建圓形應(yīng)設(shè)置r的值為元素高度和寬度的一半。

當(dāng)元素的高度和寬度相等時(shí)，這種取值方法就是圓形。

代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3圓角邊框</title>
    <style>
    #box1{
        width: 200px;
        height: 200px;
        background-color: #567;
        border:5px solid red;
        border-radius: 50%;
               margin: auto;
               box-shadow:10px 10px 5px #a2a2a3 ;}

    </style>
</head>
<body>
<div>
    <div id="box1"></div>
</div>
</body>
</html>

表現(xiàn)效果
css3中設(shè)置圓角邊框的樣式有哪些

當(dāng)我們?cè)O(shè)置元素的寬和高不再相等，改成  width：200px；height：100px  時(shí)，表現(xiàn)出來(lái)的則是橢圓形。

css3中設(shè)置圓角邊框的樣式有哪些

border-radius實(shí)現(xiàn)圓形和半圓效果

border-radius中有這樣一個(gè)特性：

給任何正方形設(shè)置一個(gè)足夠大的border-radius，就可以把它變成一個(gè)圓形。

注意：當(dāng)任意兩個(gè)相鄰的圓角的半徑之和超過(guò)  borderbox  的尺寸之后，用戶代理必須按照比例縮小各個(gè)邊框半徑所示用的值，直到它們不會(huì)相互重疊為止。

為什么叫border-radius ？

可能有些人會(huì)奇怪，border-radius到底由何得名。這個(gè)屬性并不需要邊框來(lái)參與工作，似乎叫做內(nèi)容圓角更合適一些。

實(shí)際原因是  border-radius  是對(duì)元素borderbox 進(jìn)行切圓角處理的。當(dāng)元素沒(méi)有邊框時(shí)，可能還看不出差異；當(dāng)它有邊框時(shí)，則以邊框外側(cè)的拐角作為切圓角的基準(zhǔn)。邊框內(nèi)側(cè)的圓角會(huì)稍小一些（嚴(yán)格來(lái)說(shuō)內(nèi)角半徑將是 max（0,border-radius-border-width））。

實(shí)例：

（一）、border-radius畫圓形

div{
        width:200px;
        height:200px;
        border-radius:50%;
        background: #f775a9;
    }

表現(xiàn)效果：

css3中設(shè)置圓角邊框的樣式有哪些

  • 要想實(shí)現(xiàn)一個(gè)圓形，首先要設(shè)置出一個(gè)正方形。

  • 給border-radius設(shè)置任何大于或等于50%的百分?jǐn)?shù)，都可以實(shí)現(xiàn)圓形效果。

例如：設(shè)置border-radius:70%，同樣可以得到一個(gè)圓形。

css3中設(shè)置圓角邊框的樣式有哪些

css3中設(shè)置圓角邊框的樣式有哪些

（二）、border-radius實(shí)現(xiàn)四個(gè)方向的半圓

圓角相當(dāng)是邊框?qū)?nèi)容的切割，圓角值設(shè)置的越大相當(dāng)對(duì)元素切割越圓。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style type="text/css">
    .box1{
        width:200px;height:100px;
        border-radius:400px 400px 0 0;
        background: #f775a9;
        float:left;
    }
    .box2{
        width:100px;height:200px;
        border-radius:300px 0 0 300px;
        background: #fabab8;
        float:left;
    }
    .box3{
        width:200px;
        height:100px;
        border-radius:0 0 200px 200px ;
        background: #aadfe6;
        float:left;
    }
    .box4{
        width:100px;height:200px;
        border-radius:0 100px 100px 0;
        background: #79e0c3;
        float:left;
    }
    .box5{
        width:100px;height:200px;
        border-radius:0 50px 50px 0;
        background: #acbfea;
        float:left;
    }
    </style>
</head>
<body>
<div>1</div>    
<div>2</div>  
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>

css3中設(shè)置圓角邊框的樣式有哪些

以上是“css3中設(shè)置圓角邊框的樣式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手