如何實現漂亮的圓角邊框——CSS教程

一、CSS的圓角屬性

在CSS中，我們可以通過border-radius屬性來設置元素的圓角效果，它可以接受一個或多個參數，分別控制元素的四個角的圓角弧度。

.box {
  border-radius: 10px;
}

上面的代碼表示設置.box元素的四個角的圓角弧度為10px。

如果想控制每個角的弧度，可以使用兩個值，一個來控制水平方向的弧度，另一個控制垂直方向的弧度。

.box {
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 30px 40px;
  border-bottom-left-radius: 50px 60px;
  border-bottom-right-radius: 70px 80px;
}

上面的代碼表示設置.box元素的每個角的圓角弧度，第一個值為水平方向，第二個值為垂直方向。

二、CSS的box-shadow屬性

box-shadow屬性可以使元素產生一個或多個陰影效果，具體使用方法如下：

.box {
  box-shadow: 10px 10px 10px #ccc;
}

上面的代碼表示元素產生一個10px的陰影效果，顏色為#cfcfcf。

box-shadow屬性還可以產生多重陰影效果，只需要用逗號分隔即可：

.box {
  box-shadow: 
    10px 10px 10px #ccc,
    -10px -10px 10px #ccc;
}

上面的代碼表示元素產生兩個陰影效果：向右下方偏移10px、向下方偏移10px，兩者合成10px的模糊半徑，顏色為#cfcfcf；向左上方偏移10px，向上方偏移10px，兩者合成10px的模糊半徑，顏色為#cfcfcf。

三、CSS的偽類選擇器

偽類選擇器是指在選擇元素的時候，根據元素的狀態或位置來進行選擇。

常用的偽類選擇器有hover、active、focus等，它們分別表示滑鼠懸停，元素被激活，元素獲得焦點的狀態。

我們可以結合偽類選擇器和border-radius屬性來實現僅在元素的某些角上產生圓角的效果。

.box {
  border-radius: 10px;
}

.box:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  z-index: -1;
}

.box:hover:after {
  border-radius: 0 10px 10px 0;
  box-shadow: -10px 0 0 #ccc;
}

上面的代碼通過::after偽類元素和z-index屬性來實現一個放在.box元素下方的陰影元素，當滑鼠懸停在.box元素上時，就會讓這個元素的左邊緣產生一個陰影效果，而右側則保持原始的圓角效果。

四、CSS的偽元素選擇器

偽元素選擇器是指利用::before和::after來創建一個虛擬的元素，它們並不是真正存在於DOM中的一個元素，但是它們可以在CSS中表示一個額外的內容，從而達到一些特殊的效果。

.box {
  position: relative;
}

.box::before,
.box::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.box::before {
  border-radius: 10px;
  box-shadow: -10px 0 0 #ccc;
}

.box::after {
  border-radius: 10px;
  box-shadow: 10px 0 0 #ccc;
}

上面的代碼演示了如何使用偽元素選擇器來實現一個具有左右邊框的.box元素。通過設置.box元素為相對定位，並設置偽元素的position屬性為絕對定位，就可以讓偽元素的大小和.box元素重合。然後再通過box-shadow屬性實現陰影效果就可以了。

五、完整代碼示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圓角邊框示例</title>
  <style>
    .box {
      position: relative;
      width: 200px;
      height: 100px;
      margin: 50px auto;
      background-color: #fff;
      border-radius: 10px;
    }

    .box:hover {
      border-radius: 10px 0 0 10px;
      box-shadow: -10px 0 0 #ccc;
    }

    .box:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 10px;
      z-index: -1;
    }

    .box:hover:after {
      border-radius: 0 10px 10px 0;
      box-shadow: -10px 0 0 #ccc;
    }

    .box2 {
      position: relative;
      width: 200px;
      height: 100px;
      margin: 50px auto;
      background-color: #fff;
    }

    .box2::before,
    .box2::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    }

    .box2::before {
      border-radius: 10px;
      box-shadow: -10px 0 0 #ccc;
    }

    .box2::after {
      border-radius: 10px;
      box-shadow: 10px 0 0 #ccc;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box2"></div>
</body>
</html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/312678.html