直接给设linear-gradient()并配齐background-origin、background-clip和background-size才有效；上设置兼容性差，IE10–11和Safari iOS 9中基本失效。

直接给 元素设 background-image: linear-gradient()，配齐 background-origin、background-clip 和 background-size，别碰 或

上的渐变——兼容性差、渲染不可控，尤其在 IE10–11 和 Safari iOS 9 中基本失效。

为什么

上加linear-gradient()经常没效果？

浏览器对

的背景处理逻辑不一致： 不是块级容器，它的 background 多数情况下只是“建议值”，实际由子元素 上的 linear-gradient()，Safari iOS 9 及更早版本也不支持，哪怕加了 -webkit-linear-gradient() 前缀也大概率 fallback 到第一种颜色。

实测中，把渐变写在

上，不如直接删掉重写到

覆盖；IE10–11 完全忽略
——省时间、少踩坑。 给	加渐变必须配齐的三个属性 只写 background-image: linear-gradient() 是不够的。单元格尺寸小、有 padding、可能带 border，缺任意一项都会导致颜色错位、边缘发虚、甚至被裁掉： background-origin: padding-box：确保渐变起点对齐 padding 区，而不是 content 区（否则文字撑高后渐变偏移） background-clip: padding-box：防止渐变画到 border 外侧——尤其当用了 border-radius 时，这个属性能保住圆角裁剪边界 background-size: 200% 200% + background-position: center：让渐变居中并拉伸覆盖整个单元格，避免左上角起始导致单侧色块过重 兼容性和透明度怎么兜底？ 旧浏览器仍有真实使用场景，不能只靠现代语法： Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转 实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。 下载 前缀顺序必须是：background-image: -webkit-linear-gradient(); background-image: linear-gradient();，标准版放后面，否则 IE/旧 Safari 会跳过 IE10 不支持 rgba() 在渐变中设透明度，若需半透效果，改用 hsla(200, 100%, 80%, 0.5) 或退阶为浅色逼近 别用 background: linear-gradient() 简写，它可能意外覆盖已设的 background-size 或图片，始终用 background-image 单独声明 务必提供 background-color 降级色，比如 background-color: #6a11cb;，IE9 及以下会直接 fallback 到这个色值 想模拟“渐变边框”怎么办？ CSS border 本身不支持渐变，border-image 在 Firefox 中不支持 linear-gradient() 作源，唯一稳定方案是“伪边框”： 给	设 padding: 2px（厚度即你想要的“边框粗细”） 用 background-image: linear-gradient() 填充整个 padding 区 加 background-clip: padding-box 锁住绘制范围 再套一层 background-color: #fff 盖在内容区上（即 content 区），视觉上就成了“渐变边框” 注意：不要同时设 border-radius 和 overflow: hidden，否则 Safari 可能裁掉圆角 真正麻烦的不是写法，而是每个单元格都要独立控制渐变方向和停靠点——表格越复杂，越容易漏掉某个	的 background-origin 或前缀顺序。建议封装成 CSS 类统一管理，而不是靠内联 style 堆砌。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！