这段HTML和CSS代码实现了一个简单的网页布局，展示了两张图片，并通过CSS的mask属性为图片添加了特殊的遮罩效果。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
img {
--o: 20px;
--b: 8px;
mask:
conic-gradient(#000 0 0) no-repeat 50%/ calc(100% - 2*(var(--o) + var(--b))) calc(100% - 2*(var(--o) + var(--b))),
conic-gradient(from 90deg at var(--o) var(--o), #0000 25%, #000 0) 0 0/calc(100% - var(--o)) calc(100% - var(--o));
width: 250px;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-auto-flow: column;
place-content: center;
gap: 50px;
background: repeating-linear-gradient(135deg, #D9CEB2 0 20px, #E0E4CC 0 40px);
}
</style>
</head>
<body>
<img src="https://picsum.photos/id/237/300/300">
<img src="https://picsum.photos/id/1011/300/300" style="--o:30px;--b:5px;">
</body>
</html>
HTML 结构
- 包含两个img元素，分别加载了两张图片。图片的URL指向了Picsum Photos服务，这是一个提供随机图片的API。
- 第一张图片使用了默认的CSS变量值，第二张图片通过内联样式覆盖了部分CSS变量值（--o: 30px; --b: 5px;）。
CSS 样式
- img样式：定义了两个CSS变量：
- --o：用于控制遮罩的偏移量，默认值为20px。
- --b：用于控制遮罩的边界宽度，默认值为8px。
- 使用mask属性为图片添加了遮罩效果：
- 第一个conic-gradient：创建了一个圆形的遮罩，位于图片的中心，大小为calc(100% - 2*(var(--o) + var(--b)))。
- 第二个conic-gradient：创建了一个四分之一圆形的遮罩，位于图片的左上角，大小为calc(100% - var(--o))。
- 设置图片的宽度为250px。
- body样式：将页面内容排列为水平布局。使用place-content: center将内容水平和垂直居中。
- 设置背景为重复的线性渐变，形成棋盘格样式。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
