这个 HTML 文件是一个简单的水滴状相片墙效果页面，展示了多张图片，并使用 SVG 滤镜对图片进行了视觉效果处理。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
display: grid;
}
html {
min-height: 100%;
}
body {
grid-gap: 1em;
grid-template-columns: repeat(auto-fit, min(15em, 100%));
place-content: center;
background: #a53860;
}
svg[aria-hidden="true"][height="0"] {
position: absolute;
}
img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
filter: url(#squircle) url(#shadow) url(#smooth);
}
</style>
</head>
<body>
<svg width="0" height="0" aria-hidden="true">
<filter id="squircle" primitiveUnits="objectBoundingBox">
<feGaussianBlur stdDeviation="0.2"></feGaussianBlur>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 1"></feFuncA>
</feComponentTransfer>
<feComposite in="SourceGraphic" operator="in"></feComposite>
</filter>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
<feOffset dx="6" dy="8"></feOffset>
<feComposite in="SourceAlpha" operator="out"></feComposite>
<feBlend in2="SourceGraphic" mode="multiply"></feBlend>
</filter>
<filter id="smooth">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
<feComponentTransfer>
<feFuncA type="table" tableValues="-8 7"></feFuncA>
</feComponentTransfer>
<feComposite in="SourceGraphic" operator="in"></feComposite>
</filter>
</svg>
<img src="https://images.unsplash.com/photo-1736230990003-a98eea26ea1f?w=800" />
<img src="https://images.unsplash.com/photo-1739323006029-2d8452a47df6?w=800" />
<img src="https://images.unsplash.com/photo-1739370143123-20f486557a00?w=800" />
<img src="https://images.unsplash.com/photo-1738236013982-9449791344de?w=800" />
<img src="https://images.unsplash.com/photo-1737227817817-a6010e39bfa6?w=800" />
<img src="https://images.unsplash.com/photo-1738848392298-cf0b62edc750?w=800" />
<img src="https://images.unsplash.com/photo-1736117024365-c36ccb9f843d?w=800" />
<img src="https://images.unsplash.com/photo-1739437455408-66aab68b5c0d?w=800" />
<img src="https://images.unsplash.com/photo-1734613876170-079f67aa0d15?w=800" />
<img src="https://images.unsplash.com/photo-1735534151807-17f107a64cf6?w=800" />
</html>
HTML
svg：定义了 SVG 滤镜，用于图片的视觉效果处理。 img：显示图片，每张图片都使用了 SVG 滤镜。
CSS
html：设置 html 的最小高度为 100%。
body：设置 body 的网格列布局为自适应，每列宽度为 15em，最大不超过 100%。设置网格间距（grid-gap）为 1em。使用 place-content: center 将内容水平和垂直居中。设置背景颜色为#a53860。
svg[aria-hidden="true"][height="0"]：隐藏 SVG 元素，设置为绝对定位。
img：设置图片宽度为 100%，保持纵横比为 1（aspect-ratio: 1）。设置图片填充方式为覆盖（object-fit: cover）。应用 SVG 滤镜（filter: url(#squircle) url(#shadow) url(#smooth)）。
svg：定义了一个隐藏的 SVG 元素，用于定义滤镜。width="0" 和 height="0"：将 SVG 元素的大小设置为 0，使其不可见。aria-hidden="true"：确保 SVG 元素对辅助技术不可见。
filter id="squircle"：定义了一个名为 squircle 的滤镜，用于创建圆角矩形效果。
feGaussianBlur：应用高斯模糊，标准差为 0.2。
feComponentTransfer：将透明度设置为离散值（0 或 1）。
feComposite：将模糊效果与原始图形组合。
filter id="shadow":定义了一个名为 shadow 的滤镜，用于创建阴影效果。
feGaussianBlur：应用高斯模糊，标准差为 8。
feOffset：将模糊效果偏移 6 像素水平和 8 像素垂直。
feComposite：将模糊效果与原始图形组合。
feBlend：将模糊效果与原始图形混合。
filter id="smooth"
定义了一个名为 smooth 的滤镜，用于平滑边缘。
feGaussianBlur：应用高斯模糊，标准差为 8。
feComponentTransfer：调整透明度。
feComposite：将模糊效果与原始图形组合。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
