【html5】css3渐变

来源：互联网发布：淘宝运费险换货赔吗编辑：程序博客网时间：2024/05/29 03:37

css3的渐变有两种:

一种是线性渐变:

线性渐变：    linear-gradient(方向，起始颜色，终止颜色);    方向：to left   to right  to top   to bottom 　角度　30deg    起始颜色    终止颜色

另一种是径向渐变:

径向渐变：radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）;中心点位置：at  left  right  center bottom  top

下面来实现下一些小案例

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>渐变</title>    <style>        body{            text-align: center;            background-color: #ddd;        }        div{            width: 1000px;            height: 100px;            margin: 40px auto;        }        .box1{            /* 线性渐变：                linear-gradient(方向，起始颜色，终止颜色);                方向：to left   to right  to top   to bottom 　角度　30deg                起始颜色                终止颜色            */            width: 1000px;            height: 100px;            border-radius: 5px;            /*清楚的变化*/            background-image: linear-gradient(                45deg,                yellow 0%,                yellow 25%,                green 25%,                green 50%,                yellow 50%,                yellow 75%,                green 75%,                green 100%            );            background-size: 100px 100px;        }        .box2{            background-image: linear-gradient(to right,yellow ,green);        }        span{            margin: 10px auto;            color: orange;            font: 700 18px "Micsoft YaHei";        }        .box3{            /*                径向渐变：                radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）;                中心点位置：at  left  right  center bottom  top            */            background-image: radial-gradient(at left top,yellow,green);        }        .box4{            width: 200px;            height: 200px;            border-radius: 50%;            margin:100px auto;            background-image: radial-gradient(                    at 80px 80px,                    rgba(0,0,0,0),                    rgba(0,0,0,0.6));        }    </style></head><body>    <span>线性渐变</span>    <span>清楚的变化(进度条案例)</span>    <div class="box1"></div>    <span>模糊的变化</span>    <div class="box2"></div>        <span>径向渐变</span>    <div class="box3"></div>    <span>(中心)球体案例</span>    <div class="box4"></div></body></html>

运行结果如下:

阅读全文

0 0