如何让渐变分隔线响应式？解析-webkit-gradient径向渐变语法

1. 实现响应式渐变分隔线 #

原代码使用固定像素半径（350px）导致渐变范围无法自适应容器宽度，提供两种可行方案：

方案一：使用标准CSS径向渐变语法（优先推荐） #

标准radial-gradient支持百分比、vw等相对单位，能轻松实现响应式效果：

.divider {
  height: 2px;
  /* 从中心黑色渐变到容器边缘白色，自适应容器宽度 */
  background: radial-gradient(circle at center, #000, #fff calc(50% - 1px));
}

解释：calc(50% - 1px)是为了让白色渐变刚好覆盖到容器边缘，避免分隔线两端出现多余的黑色残留（因分隔线高度为2px）。如果不需要极致精确，直接写#fff 50%也能达到基本响应式渐变效果。

方案二：兼容旧-webkit-gradient语法的响应式处理 #

如果必须兼容极老的WebKit浏览器，可改用视窗单位vw作为结束半径，确保渐变范围覆盖不同宽度的容器：

.divider {
  height: 2px;
  background: black;
  /* 50vw代表视窗宽度的一半，适配任意屏幕尺寸 */
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50vw, from(#000), to(#fff));
}

注意：旧-webkit-gradient语法不支持百分比半径，仅能使用绝对长度单位或vw这类相对视窗的单位。

2. -webkit-gradient径向渐变语法解析 #

你用到的是WebKit早期的私有径向渐变语法，与现代标准语法差异较大，逐个参数解析如下：

-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff))

• radial：声明渐变类型为径向渐变
• 起始圆参数组（前三个值）：
  • 50% 50%：起始圆的圆心位置，以元素自身为参照的百分比坐标，此处代表元素正中心
  • 0：起始圆的半径，值为0意味着渐变从圆心的一个点开始
• 结束圆参数组（接下来三个值）：
  • 50% 50%：结束圆的圆心位置，与起始圆心重合，因此是正圆形渐变（若偏移则为椭圆形）
  • 350：结束圆的半径，这个值仅支持绝对长度单位（如px），不支持百分比——这是旧语法的硬性限制，也是它无法直接用百分比实现响应式的核心原因
• from(#000)：渐变的起始颜色（对应起始圆位置的颜色）
• to(#fff)：渐变的结束颜色（对应结束圆边缘的颜色）

补充：该旧语法已被标准radial-gradient取代，现代浏览器均支持标准语法，建议优先使用标准语法以避免兼容性和功能限制问题。

内容的提问来源于stack exchange，提问作者Erik