W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 200px; background: linear-gradient( to right, red 17%, orange 17% 34%, yellow 34% 51%, green 51% 68%, blue 68% 84%, indigo 84% ); } </style> </head> <body> <h1>线性渐变 - 双位置颜色停止点</h1> <p>此线性渐变从左到右。它使用了双位置颜色停止点。相邻颜色的颜色停止点值相同，从而创建了条纹效果：</p> <div id="grad1"></div> </body> </html>