我在 div 内放置了一个图像,该 div 具有圆角,用作隐藏图像角并将其显示为圆形的遮罩。它适用于除 Safari 之外的所有浏览器!有谁知道如何解决它?
我试过了-webkit-padding-box
,-webkit-mask-box-image
但两个都没有用。
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;
}