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 - 在剪辑路径多边形上添加边框颜色

回答

相关问题