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

Question

如何在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>

Answer 1

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

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

填充边缘（内部边界）半径是外部边界半径减去相应的边界厚度。 在这导致负值的情况下，内半径为零。

如果要使内角具有半径，则需要指定大于半径宽度的边界半径。 对于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以使圆角实际剪切图像； 有关详细信息，请参见我对这个问题的回答。

Answer 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/

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

问题描述

2 个解决方案

解决方案1
3 2015-06-06 01:41:51

解决方案2
0 2015-06-06 01:30:47

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

问题描述

2 个解决方案

解决方案1 3 2015-06-06 01:41:51

解决方案2 0 2015-06-06 01:30:47

解决方案1
3 2015-06-06 01:41:51

解决方案2
0 2015-06-06 01:30:47