如何在 background-clip: padding-box 上实现边框半径？
我有一个不透明的粗边框；但是，所有四个内 Angular 都是 90 度 Angular 。
<!DOCTYPE html>
<html>
<head>
<title>Border</title>
<style>
body, html{
width: 100%;
height: 100%;
}
.image_frame{
display: flex;
width:50%;
background: white;
background-clip: padding-box;
border: 20px solid rgba(0, 0, 0, 0.3);
border-radius: 20px;
}
</style>
</head>
<body>
<div class="image_frame">
<img src="http://trudog.com/home/wp-content/uploads/2015/03/Shocked-Pups.jpg">
</div>
</body>
</html>
最佳答案
background-clip: padding-box 的实现没问题。 .image_frame 父级的背景(在本例中为 body)确实应该在半透明边框下方可见。
这里的问题是你的边框宽度等于你的边框半径。结果，您的边框的内 Angular 将为 90 度，因为圆 Angular 基本上采用实心象限的形式。来自spec :
The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness. In the case where this results in a negative value, the inner radius is zero.
如果您希望内 Angular 具有半径，您需要指定一个大于边框宽度的边框半径。对于 20px 的内半径和 20px 的 border-width，生成的 border-radius 是 40px:
.image_frame {
display: flex;
width: 50%;
background: white;
background-clip: padding-box;
border: 20px solid rgba(0, 0, 0, 0.3);
border-radius: 40px;
overflow: hidden;
}
此外，您还需要设置overflow: hidden 以便圆 Angular 真正裁剪图像；查看我对 this question 的回答了解详情。
关于html - 具有圆形边框半径的背景剪辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30677803/