具有圆形边框半径的背景剪辑答案

【问题标题】：background-clip with round border radius具有圆形边框半径的背景剪辑
【发布时间】：2015-06-06 00:49:59
【问题描述】：

如何在 background-clip: padding-box 上实现边框半径？

我有一个不透明的粗边框；但是，所有四个内角都是 90 度角。

<!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>

【问题讨论】：

如果您的边框超过 3 像素，则边角将为 90 度。不幸的是，我不知道解决方案。

标签： html css

【解决方案1】：

您对background-clip: padding-box 的实现很好。 .image_frame 的父级（在本例中为body）的背景确实应该在半透明边框下方可见。

这里的问题是你的边框宽度等于你的边框半径。结果，边框的内角将为 90 度，因为圆角基本上采用实心象限的形式。来自spec：

内边距（内边框）半径是外边框半径减去相应的边框厚度。如果这导致负值，则内半径为零。

如果您希望内角有一个半径，您需要指定一个大于边框宽度的边框半径。对于 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 以使圆角实际剪切图像；有关详细信息，请参阅我对this question 的回答。

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<title>Border</title>
<style>
.image_frame {
 display: flex;
 width: 150px;
 background: white;
 background-clip: padding-box;
 border: 20px solid rgba(0, 0, 0, 0.3);
 border-radius: 190px;
 }
 body, html{
        width: 100%;
        height: 100%;
    }
</style>
</head>
 <body>
  <div class="image_frame">
    <img src="http://trudog.com/home/wp-content/uploads/2015/03/Shocked-Pups.jpg" style="border-radius: 146px;width: 150px; height: 150px;">
  </div>
</body>
  </html>

试试这个.....https://jsfiddle.net/f0v5v8ns/1/

【讨论】：