HTML&CSS ：用 CSS 遮罩，让产品展示图 “高级感爆棚”

这段HTML和CSS代码实现了一个简单的网页布局，展示了两张图片，并通过CSS的mask属性为图片添加了特殊的遮罩效果。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!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将内容水平和垂直居中。
设置背景为重复的线性渐变，形成棋盘格样式。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！