[分享]css中怎么做圆角

CSS中如何制作圆角呢？下面我们介绍两种方法。

/* 方法一：border-radius属性 */
.border-radius {
  border-radius: 10px;
} 

使用border-radius属性可以轻松实现圆角效果。如上述代码所示，将元素的border-radius属性设为10px即可使四个角变成圆角。

/* 方法二：使用伪元素 */
.border-radius2 {
  position: relative;
}
.border-radius2::before {
  content: ';
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  z-index: -1;
} 

除了使用border-radius属性外，我们还可以通过添加伪元素来实现圆角。如上述代码所示，我们为目标元素添加相对定位，然后使用::before伪元素添加一个空白圆形，再将其放在目标元素的左上角。最后通过z-index将其放在目标元素的下方，使其覆盖目标元素的边缘，从而实现圆角效果。