如何裁剪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）;