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

更新時間:2023-11-23 來源:黑馬程序員瀏覽量:

在CSS3以前，如果要制作圓角邊框效果，需要在元素標簽中加上4個空標簽，再在每個空標簽中應用一個圓角的背景，然后對這幾個應用子圓角的標簽進行相應的定位，這個過程十分麻煩。而CSS3中新增了border-radius屬性用它來實現框效果就非常簡單了。本節(jié)將對CSS3實現圓角邊框進行詳細講解。

CSS3的圓角邊框實際上是在矩形的4個角分別做內切圓，然后通過設置內切圓的半徑來控制圓角的弧度，如圖所示。

1700731025721_水平半徑.png

矩形的內切圓半徑

bonder-radius 屬性的基本語法格式如下。

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

在上面的語法中，1~4表示可以設置l~4個值，lengh用于設置對象的圓角半徑長度，不可為負值，“%”表示其可以寫成百分比。如果“”前后的值都存在，那么“”前面的值設置其水平半徑，“/”后面的值設置其垂直半徑。如果沒有“”后面的值，則表示水平半徑和垂直半徑相等。

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

border-radins是一種縮寫的方式，我們還可以把各個角單獨拆分出來，也就是以下4種寫法，其參數都是先y軸然后x軸，具體寫法如下。

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

接下來，我們通過案例演示如何使用border-radius屬性來實現圓角邊框效果，具體如例所示。

<!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>