CSS3知识汇总5

【渐变】

线性渐变：从一个位置开始向某个特定的方向渐变，如叶片

径向渐变：从一个位置开始向四周渐变，如灯光散落

linear-gradient()函数用于生成线性渐变图片，可接收多个参数，每个参数是一个色彩值

色彩值后面跟一个尺寸值或百分比值，表示该颜色的停止位置

div{

    width: 50em;

    height: 20em;

    font-size: 10px;

    background-image: linear-gradient(

        to right,

        orangered 0%,

        orange 10%,

        gold 20%,

        lightgreen 30%,

        cyan 40%);

}

锐利的线性渐变

在两个色彩值之间，系统会自动计算插值，如果想获得锐利的渐变效果，就要在同一个停止位置写两个色彩值，它们之间将没有插值

div{

    width: 50em;

    height: 20em;

    font-size: 10px;

    background-image: linear-gradient(

        to right,

        orangered 0%,

        orange 10%, orange 20%,

        gold 20%, gold 30%,

        lightgreen 30%, lightgreen 40%,

        cyan 40%);

}

线性渐变的角度

可以在渐变序列前指定一个角度值，表示渐变将从此位置开始。

起始位置是一个角度值，介于0度和360度之间，0度位于容器底部，也就是渐变将从底部向顶部延伸

默认值是180度，即渐变从顶部向底部延伸

to top表示渐变从下到上延伸，相当于0度

to right表示渐变从左到右延伸，相当于90度

to right bottom表示向渐变从左上到右下延伸

有透明度的线性渐变

画点线

渐变图片宽8em，0-4em是黑色，4-5em是透明色，5-7em是黑色，7-8em是透明色

body{

    background-color: lightyellow;

}

div{

    width:32em;

    height: 0.5em;

    font-size: 10px;

    background-image: linear-gradient(

        to right,

        black 0, black 4em,

        transparent 4em, transparent 5em,

        black 5em, black 7em,

        transparent 7em, transparent 8em

    );

    background-size: 8em;

    margin:3em;

}

【透明的径向渐变】

div{

    width: 9em;

    height: 9em;

    background-color: black;

    border-radius: 50%;

    background-image: repeating-radial-gradient(

        transparent 0,

        transparent 0.95em,

        darkgreen 0.95em,

        darkgreen 1em);

}