css图像剪辑路径加边框
本帖最后由 亚伦影音工作室 于 2025-11-8 13:44 编辑 <br /><br /><style>.shape-outer {position: relative;
display: flex;flex-wrap: wrap;
flex-shrink: 0;
height: calc(358px + 2vw);
width: calc(358px + 2vw);
margin: 85px 85px;
background: linear-gradient(to right, #00f260, #000078);
}
.shape-inner {
height: calc(350px + 2vw);
width: calc(350px + 2vw);
background: url(https://pic1.imgdb.cn/item/686262c458cb8da5c87f7faf.jpg) no-repeat -240px 0px;
background-size: cover;
margin: auto;
}
#polygon {clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%);}
</style>
<div class="shape-outer" id="polygon">
<div class="shape-inner" id="polygon"></div>
</div> 这思路不错，先剪切一个渐变底图，再剪一个比底图小一点的图图，裁剪路径设一个就好。
若用这个做小播，还能内外不同方向地转动了呢。 欣赏亚伦老师好帖{:4_187:} 边条无限趋近于圆了。 有新意~谢谢亚伦老师精彩分享{:4_191:}
页:
[1]