移动端条纹背景必须用百分比色标，因px单位在高dpr屏易发虚错位；需色标硬接（如#000 50%,#fff 50%）、background-size显式匹配周期总长（如50%对应20px），并确保容器可渲染。

移动端条纹背景必须用百分比色标

移动端视口缩放、DPR 变化频繁，用 px 单位写色标（如 #000 0px, #000 4px, #fff 4px, #fff 8px）会导致条纹在高 DPR 屏上发虚、错位，甚至被渲染为非整像素灰边。百分比单位让浏览器按容器比例计算停靠点，天然适配缩放和不同设备像素比。

正确写法是：repeating-linear-gradient(to bottom, #000 0%, #000 50%, #fff 50%, #fff 100%) —— 这定义了一个 100% 高度的重复单元，后续靠 background-size 控制实际物理尺寸。

• 别写 0 或 0px，统一用 0%；100% 必须显式写出，不能省略
• 两个相邻色标值必须完全相等（如 #000 50%, #fff 50%），否则插值过渡，边界模糊
• 横向条纹用 to right，纵向用 to bottom；避免直接写 90deg，Safari 对角度语法支持不稳定

background-size 必须显式匹配周期总长

repeating-linear-gradient 只定义“一个格子长啥样”，不控制怎么铺。漏掉或写错 background-size，条纹会拉伸、截断、只显示一次，甚至变纯色。

比如色标是 #000 0%, #000 25%, #fff 25%, #fff 50%，周期总长是 50%，那么 background-size: 20px 20px 表示把这 50% 映射为 20px，整个单元等比缩放——不是单个色带缩放，而是整个重复图案缩放。

• 垂直条纹（to bottom）：用 background-size: auto 20px，第二个值控制垂直方向重复密度
• 水平条纹（to right）：用 background-size: 20px auto，第一个值控制水平方向重复密度
• 斜向条纹慎用 45deg；真要用，background-size 建议设为 28px 28px（≈20px × √2），否则边缘锯齿明显

IE10–11 和旧 Safari 必须降级处理

repeating-linear-gradient 在 IE10–11 完全不识别前缀，旧版 Safari（≤13.1）对 90deg 解析异常，只认 linear-gradient + background-size 的组合。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

降级写法是手动构造单周期渐变，再靠 background-size 控制平铺：

background: linear-gradient(to bottom, #000 0%, #000 50%, #fff 50%, #fff 100%);
background-size: auto 20px;

注意：这个写法依赖 background-repeat: repeat 默认行为，但很多 reset CSS 会覆盖它，所以建议显式声明：background-repeat: repeat。

• IE10+ 不支持 hsla(0, 0%, 0%, 0.5) 0% 这种带空格的写法，必须写成 hsla(0,0%,0%,0.5) 0%
• 不要在 :hover 动画里频繁切换复杂色标，重绘成本会上升，尤其低端安卓机
• 多层背景叠加时，repeating-linear-gradient 要写在逗号最左边，否则会被后面的 linear-gradient 遮盖

细条纹在移动端看不见？先查容器和渲染

1px 或 2px 条纹在 DPR=2/3 的屏幕（如 iPhone、Pixel）上容易被抗锯齿柔化，看起来像 1.5px 灰边，不是代码错，是渲染机制限制。

排查顺序必须是：容器高度是否为 0 → 是否被父元素 collapse → 是否加了 min-height → 再看色标和 background-size。

• 加 min-height: 20px 快速验证是否容器塌陷
• 最小安全条纹宽度建议从 2px 起步，设计系统如 Ant Design 的斑马纹也采用此策略
• image-rendering: pixelated 对渐变无效，别试
• 透明条纹慎用 transparent，半透叠加易出灰边；改用 rgba(0,0,0,0.1) 更可控

实际效果取决于色标硬接、background-size 匹配、容器可渲染这三点。任何一环松动，条纹就失真——不是“差不多就行”，而是“差一点就全崩”。

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