如何裁剪css中的圆角图像

Question

我需要使轮廓图像的角部应该是模糊边框。但在我的代码中，我无法完全确定。

我需要的结果应该是这样的：

但我的代码，边界模糊，重复自身。因为，非模糊图像也有相同的角落。似乎重复了这个角落。

effet { 
 
    width: 400px; 
 
    height: 125px; 
 
    margin: 0 auto 50px auto; 
 
} 
 
.profile-box { 
 
    width: 150px; 
 
    height: 150px; 
 
    margin-left: 40px; 
 
    border: none !important; 
 
    padding: 19.5px 10px; 
 
    display: block; 
 
} 
 
.min_cir { 
 
    border-radius: 50%; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.filtre--r { 
 
    -webkit-mask: -webkit-radial-gradient(center, closest-side, transparent 30%, black 80%); 
 
    -webkit-mask: radial-gradient(closest-side at center, transparent 50%, black 110%); 
 
    -webkit-filter: blur(2px); 
 
    mask: url('#mask-radial'); 
 
    filter: blur(2px); 
 
    transform: scale(1.1); 
 
    position: absolute; 
 
    top: 0; 
 
}

<div class="profile-box"> 
 
    <div class="media"> 
 
    <a class="pull-left" href=""> 
 
     <div class="effet"> 
 
     <img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg" /> 
 
     <img class="min_cir" src="http://i.imgur.com/oH1698V.jpg"> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

我需要切出的非模糊图像作为每模糊角的宽度。

Answer 1

您可以给以下方法：

首先除去缩放，因为它会像重复图像一样显示。

然后把第二个图像放在另一个div里面，并按照例子给出以下的css。这里例如在DIV是第二图像的imgDiv

和父DIV即imgDiv是overflow:hidden并给左侧和顶部值和给予高度和宽度是（图像的div - 50像素（如果想15像素模糊））达到目的。

并给出两个图像的高度和宽度相同。在这里，我给与原始图像相同的尺寸。

effet { 
 
    width: 400px; 
 
    height: 125px; 
 
    margin: 0 auto 50px auto; 
 
} 
 
.profile-box { 
 
    width: 150px; 
 
    height: 150px; 
 
    margin-left: 40px; 
 
    border: none !important; 
 
    padding: 19.5px 10px; 
 
    display: block; 
 
} 
 
.min_cir { 
 
    border-radius: 50%; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: -20px; 
 
    left: -20px; 
 
} 
 

 
.filtre--r { 
 
    -webkit-mask: -webkit-radial-gradient(center, closest-side, transparent 30%, black 80%); 
 
    -webkit-mask: radial-gradient(closest-side at center, transparent 50%, black 110%); 
 
    -webkit-filter: blur(4px); 
 
    mask: url('#mask-radial'); 
 
    filter: blur(4px); 
 
    position: absolute; 
 
    top: 0; 
 
    left:0; 
 
    
 
} 
 

 
.imgDiv{ 
 
    border-radius: 50%; 
 
    height: 266px; 
 
    left: 20px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 660px; 
 
} 
 

 
img{ 
 
    width: 700px; 
 
    height: 306px; 
 
}

<div class="profile-box"> 
 
    <div class="media"> 
 
    <a class="pull-left" href=""> 
 
     <div class="effet"> 
 
     <img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg" /> 
 
     <div class="imgDiv"> 
 
      <img class="min_cir" src="http://i.imgur.com/oH1698V.jpg"> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

Answer 2

规模（）方法增加或减少（根据用于宽度和高度给出的参数）的元件的尺寸。我认为你可以通过使用scale（）方法使用不同的垂直和水平对准来达到所需的结果。目前，您应用1.1幅度的宽度和高度。这适用于形状为正方形（等宽和高）的形式，而图像是矩形（宽度和高度不相等）。因此，您可以编写scale（）方法，例如：transform：scale（1.09,1.13）;