H5 CSS3 前端开发的各种渐变

前端开发用什麼ide|html5前端开发公开课|前端开发60个html标签

CSS3的渐变分为:

(1)线性渐变,再分为重复线性渐变;

(2)径向渐变,再分为圆形径向渐变、椭圆形径向渐变、重复径向渐变

(A、宽高相等就是圆形重复径向渐变,B、宽高不相等就是椭圆形重复径向渐变)

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>html基础前端开发: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、线性渐变(最终到达位置,渐变颜色,渐变颜色,渐变颜色。。。) 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、[重复]线性渐变(起点颜色,渐变颜色 开始位置,渐变颜色 开始位置,渐变颜色 开始位置。。。) 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、径向渐变(渐变颜色,渐变颜色,渐变颜色。。。) style=”background-image: radial-gradient(red,green,blue,purple,black)”
    </div>
    <div style=”background-image: radial-gradient(circle,red,green,blue,purple,black)”>
        4、[圆形]径向渐变(圆形,渐变颜色,渐变颜色,渐变颜色。。。) 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、[椭圆形]径向渐变(椭圆形,渐变颜色,渐变颜色,渐变颜色。。。) 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、[重复]径向渐变(起点颜色,渐变颜色 开始位置,渐变颜色 开始位置,渐变颜色 开始位置。。。) 宽高相等就是重复圆形径向渐变,宽高不相等就是重复椭圆形径向渐变 style=”background-image: repeating-radial-gradient(red,green
        50px,blue 100px,purple 150px,black 200px)”
    </div>
</body>
</html>

前端开发自动生成html|会前端开发的就会h5开发吗?|web前端与java开发

» 本文来自:前端开发者 » 《H5 CSS3 前端开发的各种渐变》
» 本文链接地址:https://www.rokub.com/4185.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!