CSS 颜色渐变从左到右，to right, to left

CSS渐变从左到右

上一节中介绍到，CSS的linear-gradient属性可以将HTML元素的背景色设计为渐变，默认情况下，该线性渐变是从上到下的方向，即to bottom，向上则是to top。那么颜色渐变从左到右，或从右到左该怎么设置呢，可以通过linear-gradient的第一个属性值设置为to left或to right来实现。比如下方的这个示例：

语法

background-image:linear-gradient(to right, color1, color2...)

提示：to right为从左到右的渐变，to left则为从右到左的渐变，color的个数自定义，值可以是颜色名，也可以是其它的颜色表示方式。

从左到右和从右到左颜色渐变实例代码，及在线编辑器

<div id='d1'></div><br>
<div id='d2'></div>

<style>
  #d1{width:100%;height:30%;background-image:linear-gradient(to right, pink, orange)}
  #d2{width:100%;height:30%;background-image:linear-gradient(to left, pink, orange)}
</style>

hot：热门