如何在我的剪辑路径中添加边框：polygon()；CSS 样式-css-IT问答社区-解决你的IT疑问

如何在我的剪辑路径中添加边框：polygon()；CSS 样式

Frak 1月前

我想知道是否可以在我的 clip-path:polygon(); 样式中添加边框，或者以任何其他方式添加边框？例如：border:5px solid red; .poligon {display: inline-block;position:

我想知道是否可以添加 border 我的 clip-path:polygon(); 风格或任何其他方式来添加边框？

喜欢： border:5px solid red;

.poligon {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  background: black;
  box-sizing: border-box;
  padding: 55px;
}

.poligon img {
  display: inline-block;
  border: 5px solid red;
  width: 150px;
  height: 150px;
  -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
  -moz-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}

<div class="poligon">
  <img src="http://lorempixel.com/g/600/400/">
</div>

帖子版权声明 1、本帖标题：如何在我的剪辑路径中添加边框：polygon()；CSS 样式
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Frak在本站《css》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Killertouch 1月前 0 取消查看

引用 8楼
使用 SVG 膨胀滤镜为复杂剪切路径添加边框

复制收缩方法仅适用于简单情况——用于当前接受的答案

目前接受的答案是通过复制并缩小它来实现的。这适用于示例，但如果形状更复杂（如文本），则不起作用。更好的方法是使用过滤器进行扩张。

形状扩张适用于任何形状

更好的方法是使用 feMorphology 过滤器进行扩张！！
- SVG fe形态过滤器
关键方面：
- 创建匹配 <image> 且 <rect> 高度和宽度相等的形状
- 使用所需形状路径/多边形进行剪辑
- 使用滤镜放大剪辑 rect 以制作边框
过滤器 radius= 成为边框厚度的替代品。

结果：
.clipper{ clip-path: url(#clip_shape); } .dilate{ filter: url("#dilate_shape"); }

<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400"> <defs> <clipPath id="clip_shape" clipPathUnits="objectBoundingBox"> <text x="0" y=".8" lengthAdjust="spacing" font-weight="700" font-style="italic" font-size="1"> M </text> </clipPath> <filter id="dilate_shape"> <feMorphology operator="dilate" in="SourceGraphic" radius="5" /> </filter> </defs> <g transform="translate(5,5)"> <g class="dilate"> <rect class="clipper" x=0 y=0 height="400px" width="400px" fill="lightgreen"></rect> </g> <image class="clipper" xlink:href="http://placekitten.com/400/300" height="400px" width="400px"> </g> </svg>