如何实现漂亮的圆角边框——CSS教程

发布时间：2023-05-12

一、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 的阴影效果，颜色为 #ccc。 box-shadow 属性还可以产生多重阴影效果，只需要用逗号分隔即可：

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

上面的代码表示元素产生两个阴影效果：向右下方偏移 10px、向下方偏移 10px，两者合成 10px 的模糊半径，颜色为 #ccc；向左上方偏移 10px，向上方偏移 10px，两者合成 10px 的模糊半径，颜色为 #ccc。

三、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>
推荐文章