background-clip with round border radius
Question
How do you implement border radius on background-clip: padding-box ?
I have a thick border with opacity; however, all four inner corners are 90deg angles.
<!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>
2 answers
solution1
3 2015-06-06 01:41:51
Your implementation of background-clip: padding-box is fine. The background of the parent of .image_frame (in this case, body ) should indeed be visible underneath the semitransparent border.
The problem here is that your border width is equal to your border radius. As a result, the inner corners of your border will be 90 degrees, since the rounded corners essentially take the form of solid quadrants. From the 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.
If you want the inner corners to have a radius, you will need to specify a border radius larger than your border width. For an inner radius of 20px and a border-width of 20px, the resulting border-radius is 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;
}
Additionally, you will need to set overflow: hidden in order for the rounded corners to actually clip the image; see my answer to this question for details.
solution2
0 2015-06-06 01:30:47
<!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>
try this..... https://jsfiddle.net/f0v5v8ns/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.