渐变色

admin管理员组

文章数量:1130349

渐变色

总结：

        渐变是用于创建一个表示两种或多种颜色线性/径向渐变的图片，是特别的image类型，只能用于image可以使用的地方

1、产生的原因：

        使用图片会增加HTTP请求次数并增大了页面体积，导致延长页面加载事件

    含义：

        指在两个及以上的颜色之间呈现出一种平滑的过渡效果，该效果是矢量效果，不会因为页面的放大而出现模糊的情况

2、分类

        线性渐变 linear-gradient(to right,red 0%,blue 100%)

        径向渐变 radial-gradient(at bottom,red 0%,blue 100%)

                at后面可以跟坐标值

                        类似于同心圆向外扩散 可以画出○套○的效果

                        不同两个颜色的间隔点相同 圆为实心不会发散

                例：

                        radial-gradient(at bottom,red 10%,yellow 10%,yellow 20%)

        角向渐变

3、特性

        可以使用背景图片的所有样式，如大小 位置 基点 剪切等，相当于一张不会失真的背景图片

4、重复渐变色

        repeating-linear-gradient(#000 0%,#fff0 100%)

        repeating-radial-gradient()

色标是无线循环重复的，直到填满整个背景

典型案例：

        太极图

        彩虹

实质：呈现出来的一个图形，不一定就是图形本来的样式，可能是通过不同图形的拼接，同一颜色的遮盖 才最终显示出来想要的图形的样式  画图形时 一定要记住只要能拼接处最终效果就可以 不要忽略相同颜色被遮盖掉的部分

渐变色

总结：

        渐变是用于创建一个表示两种或多种颜色线性/径向渐变的图片，是特别的image类型，只能用于image可以使用的地方

1、产生的原因：

        使用图片会增加HTTP请求次数并增大了页面体积，导致延长页面加载事件

    含义：

        指在两个及以上的颜色之间呈现出一种平滑的过渡效果，该效果是矢量效果，不会因为页面的放大而出现模糊的情况

2、分类

        线性渐变 linear-gradient(to right,red 0%,blue 100%)

        径向渐变 radial-gradient(at bottom,red 0%,blue 100%)

                at后面可以跟坐标值

                        类似于同心圆向外扩散 可以画出○套○的效果

                        不同两个颜色的间隔点相同 圆为实心不会发散

                例：

                        radial-gradient(at bottom,red 10%,yellow 10%,yellow 20%)

        角向渐变

3、特性

        可以使用背景图片的所有样式，如大小 位置 基点 剪切等，相当于一张不会失真的背景图片

4、重复渐变色

        repeating-linear-gradient(#000 0%,#fff0 100%)

        repeating-radial-gradient()

色标是无线循环重复的，直到填满整个背景

典型案例：

        太极图

        彩虹

实质：呈现出来的一个图形，不一定就是图形本来的样式，可能是通过不同图形的拼接，同一颜色的遮盖 才最终显示出来想要的图形的样式  画图形时 一定要记住只要能拼接处最终效果就可以 不要忽略相同颜色被遮盖掉的部分

本文标签： 渐变色