边界半径间隙[重复项]

Question

这个问题已经在这里有了答案：

• CSS在嵌套div上出现的border-radius错误外观 6个答案

我在div中添加了边框和边框半径。 在该div中有.wrapper ::before ，它从.wrapper继承border-radius ，但是以某种方式显示border是错误的。 有明显的缝隙。

 .wrapper { width: 500px; height: 200px; border: 10px solid black; border-radius: 40px; background-color: #ccc; overflow: hidden; position: relative; } .wrapper::before { border: 2px solid red; box-shadow: 0 0 2px rgba(1, 117, 255, 0.9); opacity: 1; border-radius: inherit; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

 <div class="wrapper"></div> 

CSS可以解决这个问题吗？

Answer 1

对于您当前的布局， border-radius: 30px; 对于::before工作：

 .wrapper { width: 500px; height: 200px; border: 10px solid black; border-radius: 40px; background-color: #ccc; overflow: hidden; position: relative; } .wrapper::before { border: 2px solid red; box-shadow: 0 0 2px rgba(1, 117, 255, 0.9); border-radius: 30px; opacity: 1; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

 <div class="wrapper"></div>