本文介绍了在父div上设置边框半径的图像角修剪在Safari中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个放置在div内的图像,该div具有圆角,用作遮罩以隐藏图像角并将其显示为圆形.它可以在除Safari之外的所有浏览器中使用!有谁知道如何解决它?
I have an image placed inside a div, the div has rounded corners which works as a mask to hide the image corners and display it as a circle. It works in all browser except for Safari! does anyone knows how to fix it?
我尝试了 -webkit-padding-box
, -webkit-mask-box-image
,但两者均无效.
I tried -webkit-padding-box
, -webkit-mask-box-image
but both didn't work.
HTML:
<div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div>
CSS:
.cat{
width: 128px;
height: 128px;
margin: 20px 96px 0px 96px;
position: relative;
float: left;
border-radius: 50%;
overflow: hidden;
border-top: 1px solid #111;
border-bottom: 1px solid #fff;
background: #fff;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}
.cat img{
position: absolute;
border: none;
width: 138px;
height: 138px;
top: -8px;
left: -8px;
cursor: pointer;
}
推荐答案
最好的解决方法是在父元素上指定 overflow:hidden;
.
The best way around this is by specifying overflow: hidden;
on the parent element.
这篇关于在父div上设置边框半径的图像角修剪在Safari中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!