WEB前端

CSS3的各种渐变

位置:首页 > WEB前端 > css3教程,2017-12-06 10:43
CSS3的渐变分为:(1)线性渐变,再分为重复线性渐变;(2)径向渐变,再分为圆形径向渐变、椭圆形径向渐变、重复径向渐变(A、宽高相等就是圆形重复径向渐变,B、


CSS3的渐变分为:(1)线性渐变,再分为重复线性渐变;(2)径向渐变,再分为圆形径向渐变、椭圆形径向渐变、重复径向渐变(A、宽高相等就是圆形重复径向渐变,B、宽高不相等就是椭圆形重复径向渐变)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3渐变汇总</title>
    <style>
        div{
            width:1000px;height:400px;color:white;
        }
    </style>
</head>
<body>
<div style="background-image: linear-gradient(to right,red,green,blue,purple,black)">
    1、线性渐变(最终到达位置,渐变颜色,渐变颜色,渐变颜色。。。)<br/>
    style="background-image: linear-gradient(to right,red,green,blue,purple,black)"
</div>
<div style="background-image: repeating-linear-gradient(red,green 50px,blue 100px,purple 150px,black 200px)">
    2、[重复]线性渐变(起点颜色,渐变颜色 开始位置,渐变颜色 开始位置,渐变颜色 开始位置。。。)<br/>
    style="background-image: repeating-linear-gradient(red,green 50px,blue 100px,purple 150px,black 200px)"
</div>
<div style="background-image: radial-gradient(red,green,blue,purple,black)">
    3、径向渐变(渐变颜色,渐变颜色,渐变颜色。。。)<br/>
    style="background-image: radial-gradient(red,green,blue,purple,black)"
</div>
<div style="background-image: radial-gradient(circle,red,green,blue,purple,black)">
    4、[圆形]径向渐变(圆形,渐变颜色,渐变颜色,渐变颜色。。。)<br/>
    style="background-image: radial-gradient(circle,red,green,blue,purple,black)"
</div>
<div style="background-image: radial-gradient(ellipse,red,green,blue,purple,black)">
    5、[椭圆形]径向渐变(椭圆形,渐变颜色,渐变颜色,渐变颜色。。。)<br/>
    style="background-image: radial-gradient(ellipse,red,green,blue,purple,black)"
</div>
<div style="background-image: repeating-radial-gradient(red,green 50px,blue 100px,purple 150px,black 200px)">
    6、[重复]径向渐变(起点颜色,渐变颜色 开始位置,渐变颜色 开始位置,渐变颜色 开始位置。。。)<br/>
    宽高相等就是重复圆形径向渐变,宽高不相等就是重复椭圆形径向渐变<br/>
    style="background-image: repeating-radial-gradient(red,green 50px,blue 100px,purple 150px,black 200px)"
</div>
</body>
</html>



TAGS:CSS3渐变



猜你喜欢


NewHot手机版