CSS3渐变背景怎么弄_linear和radial渐变区别【方法】-html教程-PHP中文网

linear-gradient需注意方向逻辑（如to top表示向上渐变）、角度单位（0deg=to top）、多色停靠点须显式标注百分比；radial-gradient需明确形状/大小/位置三要素顺序，用关键字控制扩散范围；二者坐标系统本质不同。

css3渐变背景怎么弄_linear和radial渐变区别【方法】

直接用 background: linear-gradient(...) 就行，但方向和颜色停靠点写错，页面就“渐变不动”或“只显示一半”。常见错误是把 to top 当成“从上开始”，其实它表示“渐变方向朝上”，也就是颜色从下往上过渡——起始色在底部，结束色在顶部。

to bottom（默认）：起始色在上，结束色在下；to top 则相反
角度单位是 deg，0deg = to top，90deg = to right，不是直觉里的“水平向右为 0”
多色渐变时，如果不写百分比，浏览器会等分位置；但想让橙色占前 20%、绿色从 20% 开始，就得显式写 orange 0%, orange 20%, green 20%
别漏写 background-image 的完整属性名——只写 background: linear-gradient(...) 是合法的，但若同时设了 background-color，记得它会被渐变覆盖（除非用透明色叠加）

radial-gradient 默认是椭圆（ellipse），在正方形容器里看不出区别，但一放到宽高不等的 div 里，就会拉伸变形。真正控制“圆不圆”“大不大”“偏不偏”的，是第一个参数里的三个要素：形状 + 大小 + 位置，顺序不能乱，且中间用空格隔开。

基础写法：radial-gradient(circle at center, red, blue) —— 明确指定圆形、居中、无大小约束
大小关键字很关键：closest-side 让渐变刚好触到最近的边，farthest-corner 则撑满到最远角；用像素值如 50px 也行，但响应式场景下推荐关键字
at top left 不等于 at 0 0，前者是关键词定位，后者是坐标定位（需带单位，如 at 0px 0px），混用会失效
如果只写两个颜色却看到“中心一团色、四周大片白”，大概率是没设 background-size: cover 或容器没设高度——径向渐变不会自动铺满，它按计算出的半径渲染，超出部分就是透明/背景色

不是“线 vs 圆”这么表面——本质是坐标系统不同：linear-gradient 基于一条有方向的直线（1D 路径），所有颜色沿这条线排布；radial-gradient 基于极坐标（2D 扩散），颜色从一个点出发，按距离衰减或增强。

Comet AI 浏览器

下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

方向控制方式完全不同：linear 用角度或 to X，radial 用 at X 定中心 + 关键字定扩散范围
多色停靠点含义不同：linear 中 red 30% 指“这条线上 30% 位置是红色结束点”；radial 中 red 30% 指“离中心点 30% 半径处红色结束”
性能影响轻微但存在：radial 在高分辨率或动画中重绘成本略高，尤其用了 farthest-corner 这类需实时计算的大小关键字时
兼容性一致：现代浏览器（Chrome 26+/Firefox 16+/Safari 6.1+）都原生支持，无需 -webkit- 前缀

想让渐变“透出底图”或做出条纹效果，得靠 rgba() 和 repeating-linear-gradient，但容易忽略 alpha 通道叠加逻辑和尺寸单位陷阱。

用透明色做渐变时，background-color 会作为底层，background-image 叠在其上；所以 background: #333; background-image: linear-gradient(rgba(255,255,255,0.2), transparent) 才能看清灰底上的浅白渐变
repeating-linear-gradient 的颜色断点必须用**绝对单位**（px、em）或百分比，不能只写颜色；例如 repeating-linear-gradient(45deg, red 0px, red 10px, blue 10px, blue 20px) 表示每 20px 重复一次红蓝条纹
千万别在 repeating 渐变里混用 to bottom 和像素值——方向关键词会覆盖尺寸逻辑，导致条纹消失或错位