CSS - 在剪輯路徑多邊形上添加邊框顏色

我正在第一次使用剪輯路徑，我需要在此形狀中添加邊框。任何人都可以解釋我該怎麼做？CSS - 在剪輯路徑多邊形上添加邊框顏色

.image-center { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
} 
 
.shape { 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%); 
 
    clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%); 
 
} 
 
img { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div class="image-center"> 
 
    <div class="shape"> 
 
    <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" /> 
 
    </div> 
 
</div>

來源

2016-09-15 user3242861

複製的[這]（http://stackoverflow.com/questions/31854185/how -to-add-border-in-my-clip-path-polygon-css-style）SO問題 –

你可以用幾個下拉陰影過濾假的。沒有太多的支持，但是CLI路徑沒有太多要麼...

.image-center { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
    -webkit-filter: drop-shadow(2px 2px 0px red) 
 
    drop-shadow(2px -2px 0px red) 
 
    drop-shadow(-2px 2px 0px red) 
 
    drop-shadow(-2px -2px 0px red); 
 
    filter: drop-shadow(2px 2px 0px red) 
 
    drop-shadow(2px -2px 0px red) 
 
    drop-shadow(-2px 2px 0px red) 
 
    drop-shadow(-2px -2px 0px red); 
 
} 
 
.shape { 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%); 
 
    clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%); 
 
} 
 
img { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div class="image-center"> 
 
    <div class="shape"> 
 
    <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" /> 
 
    </div> 
 
</div>

來源

2016-09-15 17:21:29 vals

謝謝。我怎麼能在Firefox中做到這一點？展示與主流瀏覽器兼容的方式的最佳解決方案是什麼？ @vals – user3242861

對它的幫助感到高興。使用SVG可以獲得更好的支持。如果您使用SVG，還有更好的方法來獲得邊界效果。請參閱由Jeroen Heier提供的第二個答案 – vals

CSS - 在剪輯路徑多邊形上添加邊框顏色

回答

相關問題