在css中如何用linear-gradient实现条纹色

使用linear-gradient通过控制色标位置可创建条纹背景，如background: linear-gradient(to bottom, red 50%, white 50%)实现红白相间条纹，调整百分比可改变条纹宽度，支持多色和方向变化，推荐repeating-linear-gradient实现重复条纹图案。

在 CSS 中，你可以使用 linear-gradient 函数来创建条纹色背景。关键是通过控制颜色的色标位置，让颜色之间不平滑过渡，从而形成清晰的条纹效果。

基本语法与原理

默认情况下，linear-gradient 会平滑过渡颜色。要实现条纹，你需要让相邻颜色在同一个位置开始和结束，中间不留渐变空间。

例如，创建一个水平红白相间的条纹：

这里红色从 0% 开始，到 50% 结束；白色从 50% 开始，到 100% 结束。由于两者在 50% 处“接壤”，就形成了清晰的分界线，即条纹。

立即学习“前端免费学习笔记（深入）”；

控制条纹宽度

你可以通过调整色标位置来改变每条条纹的宽度。

Blackink AI纹身生成

创建类似纹身的设计，生成独特纹身

17

查看详情

• 红条占 30%，白条占 70%：

• 更细的红条（10%）和宽的白条（90%）：
background: linear-gradient(to bottom, red 10%, white 10%);

多色条纹与方向控制

支持多种颜色和不同方向。

• 三色水平条纹（红、白、蓝，各占 33.3%）：
background: linear-gradient(to bottom, red 33.3%, white 33.3%, white 66.6%, blue 66.6%);
• 垂直条纹（从左到右）：
background: linear-gradient(to right, red 50%, white 50%);
• 斜向条纹：
background: linear-gradient(45deg, red 25%, white 25%);

重复条纹（推荐使用 repeating-linear-gradient）

如果想让条纹自动重复，比如做背景图案，建议使用 repeating-linear-gradient 更方便。

background: repeating-linear-gradient(0deg, red, red 10px, white 10px, white 20px);

这会创建每隔 20px 重复的红白条纹，每条宽 10px。

基本上就这些。通过精确控制色标位置，linear-gradient 能轻松实现各种条纹效果，关键是让相邻颜色在同一位置切换，避免渐变。不复杂但容易忽略细节。

以上就是在css中如何用linear-gradient实现条纹色的详细内容，更多请关注php中文网其它相关文章！