by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12115
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、corner-shape之前介绍过

CSS corner-shape属性去年8月份刚刚介绍过，可以实现多种图形效果。

很强，也大开眼界。

有兴趣的可以去这里学习其语法：“大开眼界的CSS corner-shape属性”

但是这些图形效果一次只能创建一个，如果可以将这些图形效果批量复制，岂不是可以实现各种复杂的底纹背景效果。

还真可以实现。

二、文字、图形SVG背景技术

这种将HTML内容变成SVG背景图的技术我之前就研究并介绍过，可以参见“如何让文字作为CSS背景图片显示”此文。

对于文字，我们可以使用纯SVG语法。

但是，对于相对有些复杂的图形效果，我们可以借助<foreignObject>元素。

foreignObject我之前也介绍过，可以用来实现DOM截图效果，详见“SVG foreignObject简介与截图等应用”一文。

所以，我们的实现模板就变成了这样：

.template {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">对该DIV设置样式</div></foreignObject></svg>'
}

三、实战-从最简单的开始

在过去，我们要实现网格线，需要使用两个repeating-linear-gradient()渐变函数，函数里面也需要写比较精确的断点。

如果，借助corner-shape属性，我们有了更加渐变的实现方法。

CSS代码示意：

.grid-bg {
  aspect-ratio: 1;
  background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="border: 1px solid deepskyblue;border-radius: calc(50% - 1px);corner-shape: notch;aspect-ratio: 1;width:60px;"></div></foreignObject></svg>');
  background-size: 60px 60px;
}

此时，我们给页面添加一个类名是grid-bg的canvas元素，我们就可以看到如下图所示的底纹效果了：

而CSS的背景图是可以无限叠加的，所以，我们可以再网格线基础上再融合点其他图形，例如，闪烁星星，于是：

..grid-bg2 {
  aspect-ratio: 1;
  --url-star: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='100%' height='100%'><div xmlns='http://www.w3.org/1999/xhtml' style='background:deeppink;width:60px;height:60px;corner-shape:superellipse(-2.5);border-radius:50%;'></div></foreignObject></svg>");
  --url-grid: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="border: 1px solid deepskyblue;border-radius: calc(50% - .75px);corner-shape: notch;aspect-ratio: 1;width:60px;"></div></foreignObject></svg>');
  background: var(--url-star) 1px 1px, var(--url-grid);
  background-size: 60px 60px;
}

可以有如下图所示的渲染效果：

更多案例

这里有个codepen地址，里面有多个使用corner-shape属性实现的背景纹理图。

原理都是一样的，我就不赘述了。

四、结语说明

如果遇到SVG图形直接访问是可以的，但是作为background图片就无法渲染，试试对其进行转义，代码如下：

const encodeSvg = function (str) {
    return "data:image/svg+xml," + str.replace(/"/g,"'").replace(/%/g,"%25").replace(/#/g,"%23").replace(/{/g,"%7B").replace(/}/g,"%7D").replace(/</g,"%3C").replace(/>/g,"%3E");
}

其中 str就是完整的SVG代码。

另外，需要注意的是，使用<foreignObject>元素作为SVG背景图形的时候，里面的HTML祖先元素需要设置xhtml的命名空间，外部的SVG元素也需要SVG的命名空间，否则会有渲染问题。

截止到今天，也就是2026年3月30日，corner-shape属性依然只有Chrome浏览器支持，所以，本技术，大家目前了解下即可，实际生产环境使用，还需要些时日。

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12115

（本篇完）