<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
.clip-div {
position: relative;
width: 100px;
height: 100px;
clip-path: polygon(
15px 0,
calc(100% - 15px) 0,
100% 15px,
100% calc(100% - 15px),
calc(100% - 15px) 100%,
15px 100%,
0 calc(100% - 15px),
0 15px
);
}
.clip-div__img {
width: 100%;
height: 100%;
}
</style>
<div class="clip-div">
<img
class="clip-div__img"
src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00446-655.jpg"
/>
</div>
</body>
</html>
图片添加棱角边框
最新推荐文章于 2025-04-04 16:14:45 发布