双圆环加矩形线性渐变效果可以通过CSS的多背景叠加、渐变语法以及定位布局来实现，核心是利用不同的渐变层组合出目标视觉形态，不需要依赖额外的图片资源，纯CSS就能完成适配。
实现原理说明
整个效果由三层背景叠加而成：最底层是矩形的线性渐变背景，中间层是两个圆环的径向渐变背景，最上层是覆盖在圆环中心的透明遮罩，用来形成圆环的中空效果。通过background属性的多值设置，可以把这些层按顺序叠加到同一个元素上。
核心CSS属性解析
线性渐变语法
矩形背景使用linear-gradient函数，语法格式为linear-gradient(渐变方向, 颜色1 位置1, 颜色2 位置2...)，方向可以用角度或者关键词表示，比如to right表示从左到右渐变。
径向渐变语法
圆环使用radial-gradient函数，语法格式为radial-gradient(形状 尺寸 at 位置, 颜色1 位置1, 颜色2 位置2...)，通过控制颜色的位置区间，可以做出中空的圆环效果。
完整实现代码
以下是完整的HTML和CSS代码，直接复制到文件中即可运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双圆环矩形渐变效果</title>
<style>
.gradient-container {
width: 400px;
height: 200px;
border-radius: 12px;
/* 多背景叠加，从下到上依次是矩形渐变、圆环渐变、圆环遮罩 */
background:
/* 最上层：两个圆环的中心遮罩，形成中空效果 */
radial-gradient(circle at 100px 100px, transparent 38px, #fff 39px, #fff 42px, transparent 43px),
radial-gradient(circle at 300px 100px, transparent 38px, #fff 39px, #fff 42px, transparent 43px),
/* 中间层：两个圆环的渐变颜色 */
radial-gradient(circle at 100px 100px, #ff6b6b 0%, #ff8e53 40%, transparent 41%),
radial-gradient(circle at 300px 100px, #4ecdc4 0%, #44a08d 40%, transparent 41%),
/* 最底层：矩形线性渐变 */
linear-gradient(to right, #667eea 0%, #764ba2 100%);
background-size: 100% 100%;
position: relative;
}
</style>
</head>
<body>
<div class="gradient-container"></div>
</body>
</html>
参数调整说明
如果需要修改效果的外观，可以调整以下参数：
- 修改
linear-gradient中的颜色值和渐变方向，调整矩形背景的样式 - 修改
radial-gradient中的at后面的坐标，调整两个圆环的位置 - 修改径向渐变中的颜色区间数值，调整圆环的大小和渐变范围
- 修改容器的
width和height，调整整体尺寸
注意事项
多背景的叠加顺序是从后往前显示，所以最底层的背景要写在最后面。如果圆环的遮罩层颜色和页面背景不一致，需要把遮罩的颜色改成对应页面的背景色，才能保证圆环的中空效果自然。另外不同浏览器对渐变语法的支持度略有差异，如果需要兼容旧版本浏览器，可以添加对应的前缀。