[分享]css中如何让四个角有线条

CSS中可以通过borderradius属性让一个元素的四个角变得圆润。不过如果我们需要给圆润的四个角添加线条，该怎么办呢？下面就来介绍一种简单的方法：.box { borderradius: 10p...

CSS中可以通过border-radius属性让一个元素的四个角变得圆润。不过如果我们需要给圆润的四个角添加线条，该怎么办呢？下面就来介绍一种简单的方法：

.box {
  border-radius: 10px;
  border: 2px solid #ccc;
  overflow: hidden;
}
.box:before,
.box:after {
  content: ';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ccc;
  z-index: -1;
}
.box:before {
  top: -2px;
  left: -2px;
  border-top-left-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.box:after {
  bottom: -2px;
  right: -2px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 8px;
} 

首先，在要添加线条的元素上添加一个定宽定高、无背景色的伪元素。这里使用了:before和:after，因为我们需要在元素的四个角都添加线条。然后，将伪元素的z-index设为-1，使其处于元素下方。

接下来，需要为:before和:after分别设置位置和圆角半径。以:before为例，我们需要将它移动到元素左上角，因此设置top和left的值为-2px。而圆角半径则需要将左上角的设为8px，将其余三个角的半径设为0。

最后，将:after移动到元素右下角，设置bottom和right的值为-2px。同时将它的右下角圆角半径设为8px，其余三个角的半径设为0。

这样就可以让一个元素的圆润角上添加线条了。