您现在可以轻松地在 CSS 中定义径向和线性渐变。 不再需要在单独的软件中创建图像。 它们仍然是浏览器内部生成的图像,因此您需要在背景属性或元素中定义它们,并且您可以在方向和颜色停止方面获得足够的灵活性。
在这里,我们将探索定义线性渐变的语法。 有关径向渐变,请参阅 这篇文章 。
/* Simplest Case */ .box { background: linear-gradient(black, white); } /* Defining a direction and adding a 3rd color stop */ .box { background: linear-gradient(to top, #211533, #211533, #3e275f); } /* Direction in degrees instead */ .box { background: linear-gradient(135deg, #211533, #211533, #3e275f); } /* Control over the position of the color stops */ .box { background: linear-gradient(135deg, #211533 20%, #211533 40%, #3e275f); }
方向
您可以以度为单位或使用以下关键字之一定义线性渐变的方向:top bottom、to top、to right、to left、to top left、to top right、to bottom left、to bottom right。
不支持渐变的浏览器的默认颜色
定义一个旧浏览器将依赖的默认基色是个好主意:
.box { background: #211533; background: linear-gradient(to top, #211533, #211533, #3e275f); }
浏览器支持
我可以使用 css-gradients 吗? 来自 caniuse.com 的主流浏览器支持 css-gradients 功能的数据。