[分享]css上边框无法加圆角

在CSS中，我们可以使用borderradius属性给边框添加圆角。然而，有一种情况下，即使我们添加了borderradius属性也无法给上边框添加圆角。 div { bordertop: 1px s...

在CSS中，我们可以使用border-radius属性给边框添加圆角。然而，有一种情况下，即使我们添加了border-radius属性也无法给上边框添加圆角。

 div {
        border-top: 1px solid black;
        border-radius: 10px;
    } 

上述代码中，我们希望给div元素的上边框添加10px的圆角。但是你会发现，实际上这个圆角并没有出现。

这是因为CSS的渲染原理是从左上角开始逆时针方向绘制边框，当绘制到上左角时，如果此时上边框有圆角，那么它会覆盖住左边框，使得圆角失去作用。因此，我们需要找到一种解决这个问题的方法。

解决方法是使用伪元素。我们可以创建一个伪元素并让它覆盖在边框上方，这样就可以避免圆角被上边框覆盖的问题了。

 div {
        position: relative;
    }
    div::before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        border-top: 1px solid black;
        border-radius: 10px;
    } 

上述代码中，我们创建了一个伪元素，并使它覆盖在div元素的边框上方。这个伪元素的边框会显示在div元素的上边框处，并且由于它有圆角，因此上边框也自然而然地获得了圆角效果。

总之，当我们需要给上边框添加圆角时，可以使用伪元素来解决这个问题。我们只需要把伪元素放在上边框的位置，并让它的圆角效果覆盖掉原来的上边框即可。