CSS中利用border-radius屬性設(shè)置圓角邊框效果

更新時(shí)間:2023-11-23 來(lái)源:黑馬程序員瀏覽量:

在CSS3以前，如果要制作圓角邊框效果，需要在元素標(biāo)簽中加上4個(gè)空標(biāo)簽，再在每個(gè)空標(biāo)簽中應(yīng)用一個(gè)圓角的背景，然后對(duì)這幾個(gè)應(yīng)用子圓角的標(biāo)簽進(jìn)行相應(yīng)的定位，這個(gè)過(guò)程十分麻煩。而CSS3中新增了border-radius屬性用它來(lái)實(shí)現(xiàn)框效果就非常簡(jiǎn)單了。本節(jié)將對(duì)CSS3實(shí)現(xiàn)圓角邊框進(jìn)行詳細(xì)講解。

CSS3的圓角邊框?qū)嶋H上是在矩形的4個(gè)角分別做內(nèi)切圓，然后通過(guò)設(shè)置內(nèi)切圓的半徑來(lái)控制圓角的弧度，如圖所示。

1700731025721_水平半徑.png

矩形的內(nèi)切圓半徑

bonder-radius 屬性的基本語(yǔ)法格式如下。

border~radius: 1~4 Length|5 / 1~~4 Length:

在上面的語(yǔ)法中，1~4表示可以設(shè)置l~4個(gè)值，lengh用于設(shè)置對(duì)象的圓角半徑長(zhǎng)度，不可為負(fù)值，“%”表示其可以寫(xiě)成百分比。如果“”前后的值都存在，那么“”前面的值設(shè)置其水平半徑，“/”后面的值設(shè)置其垂直半徑。如果沒(méi)有“”后面的值，則表示水平半徑和垂直半徑相等。

barder-radius 屬性的4個(gè)值是按照top-left、top-right、bottom-right和boltom-left的順序來(lái)設(shè)置的。如果省略botom-lef.則其與top-right相同;如果省略 bottom-right,則其與top-lef相同;如果省略top-right,則其與 top-left相同。

border-radins是一種縮寫(xiě)的方式，我們還可以把各個(gè)角單獨(dú)拆分出來(lái)，也就是以下4種寫(xiě)法，其參數(shù)都是先y軸然后x軸，具體寫(xiě)法如下。

border-top-left-radius: <length> <length>       //左上角
border-top-right-radiua: <length> <length>  // 右上角
border-bottom-right-radius: <length> <length>   //右下角
border-botton-left-radius: <length> <length>    //左下角

接下來(lái)，我們通過(guò)案例演示如何使用border-radius屬性來(lái)實(shí)現(xiàn)圓角邊框效果，具體如例所示。

<!DOCTYPg htm1>
<html>
<head>
  <meta charset="UTE-8">
  <title>CSS3圓角邊框</title>
  <style>
    section {
      padding: 10px;
    }
    div {
      display: inline-block;
      padding: 15px 25px:
      text-align: center;
      font-size: 16px:
      border: 2px solid 4000;
      color: 4000;
      background-color: feee,
      border-zadius: 12px;
    }
  </style>
</head>
<body>
  <section>
    <div>圓角邊框</div>
  </sectfon>
</body>
</html>

上一篇：前端是做什么的？一文快速讀懂前端 下一篇：黑馬程序員鴻蒙開(kāi)發(fā)培訓(xùn)