css边框变圆角边框如何写

什么是边框圆角？

边框圆角是一种使html/css更加美观的技术。简单来说就是让元素的边框变成圆角。它为元素提供了一些感官上的舒适和温馨，使元素看起来不那么棱角分明。下面我们将介绍如何使用CSS制作边框圆角。

border-radius: 5px;

如何使用CSS制作边框圆角？

CSS的border-radius属性是制作圆角的最基本方法。它可以用于在元素的四个角上添加圆角。这个属性有两种语法：

border-radius: 5px;
border-radius: 5px 10px 15px 20px;

第一个示例只设置了一个值。这将使四个角都获得相同的圆角半径，也就是5像素。

第二个示例设置了4个值，分别对应圆角的半径。这4个值表示左上角，右上角，右下角和左下角圆角的半径。对于需要不同圆角大小的场景，使用第二种语法比较方便。

如何通过伪元素制作边框圆角？

使用CSS3的伪元素，我们可以只对一个元素的某几个角进行操作。在这种场景下，我们可以使用伪元素:before和:after。

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  border-top: 5px solid #f00;
  border-left: 5px solid #f00;
  width: 10px;
  height: 10px;
  border-radius: 0 0 0 10px;
}

.box:after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  border-bottom: 5px solid #f00;
  border-right: 5px solid #f00;
  width: 10px;
  height: 10px;
  border-radius: 0 0 10px 0;
}

如何给一个元素添加透明边框？

我们可以通过box-shadow属性来创建透明边框。

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.5);
}

在这个示例中，我们使用了一个5像素宽的透明边框。该边框模拟出了一个外部边框，但它真的是透明的。