CSS3实现背景图片色彩的梯度渐变

1.linear gradients（线性梯度渐变）

    从起始线开始，一层一层的渐变。

    样例：linear-gradient（方向，色彩，色彩，…）；

        方向：（1）具体方向：top，left等；

                   （2）角度方向：30deg等（角度按逆时针方向旋转，0度时为从左向右方向）；

                   （3）默认从上到下；

        例： 

             linear-gradient(left, white, red)

             linear-gradient(30deg, white, red)

             linear-gradient(white, red)

2、radial gradients（径向梯度渐变）

      从点开始，以圆的方式向外渐变。

      样例：radial-gradients（点的位置，色彩，色彩，…）；

          点的位置：（1）默认为center；

                            （2）坐标；

          例： 

               radial-gradients（white, red）/（ center，white, red）

               radial-gradients （10% 20%, white, red）/（10px  20px, white, red）

3、repeating gradients（重复梯度渐变）

      完全相同的梯度语法，且整个渐变将被循环填充：

      循环渐变 repeating-linear-gradient()和repeating-radial-gradient()；

      样例：repeating-linear-gradient（方向，色彩，色彩，…）；

                repeating-radial-gradient（点的位置，色彩，色彩，…）；

       梯度两端色彩将被循环用于调整他们首尾相连。

        例： 

              repeating-linear-gradient(left, white, red)

              repeating-linear-gradient(30deg, white, red)

              repeating-linear-gradient(white, red)

              repeating-radial-gradients（white, red）/（ center，white, red）

              repeating-radial-gradients （10% 20%, white, red）/（10px  20px, white, red）

5.Color Stops（色站）

     颜色可以在渐变中的设置停靠点；

     如果不设置色站，颜色会默认平均分配；

      例：

            linear-gradient(left, red, green, blue)

      当然如果你愿意，你还可以为个别颜色定位具体的停靠点，然后让浏览器分配其它剩余的：

      例：

            linear-gradient(top left, red 20px, yellow, green, blue 90%)

       渐变轴线可能是条对角线，那么百分比则相应对角线的长度。

       颜色的停靠点相同会使颜色之间过渡强烈：

      例：

             linear-gradient(top left, red, yellow, green 50%, purple 60%, blue)

这篇文章对你有帮助吗？作为一名程序工程师，在评论区留下你的困惑或你的见解，大家一起来交流吧！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！