CSS3颜色渐变整理

一只秋暝

已于 2024-03-05 11:14:12 修改

阅读量352

点赞数

分类专栏：笔记文章标签： html css3 ui

于 2022-09-12 19:13:55 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46208057/article/details/123202885

版权

笔记专栏收录该内容

5 篇文章

订阅专栏

颜色渐变，参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a,.b {
            height: 100px;
            width: 100px;
            color: #ffffff00;
            }
        .a:hover:active,
        .b:hover:active {
            height: 300px;
            width: 300px;
            color: #ffffff;
        }
        /*默认情况下,颜色节点均匀分布*/
        /*预定义方向（to bottom、to top、to right、to left、to bottom right...)*/
        /*角度是指水平线和渐变线之间的角度，逆时针方向计算。*/
        .a:nth-child(1) {
            background-image: linear-gradient(#e66465, #9198e5)}
        .a:nth-child(2) {
            background-image: linear-gradient(to right, red, yellow)}
        .a:nth-child(3) {
            background-image: linear-gradient(to bottom right, red, yellow)}
        .a:nth-child(4) {
            background-image: linear-gradient(150deg, red, yellow)}
        .a:nth-child(5) {
            background-image: linear-gradient(red, yellow, green)}
        .a:nth-child(6) {
            background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)}
        .a:nth-child(7) {
            background-image: linear-gradient(to right,  red, #ff000000)}
        .a:nth-child(8) {
            background-image: repeating-linear-gradient(red, yellow 10%, green 20%)}
        .a:nth-child(9) {display: none}
        /*语法,background-image: radial-gradient(shape size at position, start-color, ..., last-color)*/
        /*默认情况下的径向渐变，中心center（在中心点），形状ellipse（椭圆形），大小farthest-corner（到最远的角落）,颜色节点均匀分布*/
        /*size 参数定义了渐变的大小。shape参数定义了形状。circle圆形，ellipse椭圆形(默认值)*/
        .b:nth-child(1) {
            background-image: radial-gradient(red, yellow, green)}
        .b:nth-child(2) {
            background-image: radial-gradient(red 5%, yellow 15%, green 50%)}
        .b:nth-child(3) {
            background-image: radial-gradient(circle, red, yellow, green)}
        .b:nth-child(4) {
            background-image: radial-gradient(closest-side at 70% 70%, red, yellow, black)}
        .b:nth-child(5) {
            background-image: radial-gradient(closest-corner at 70% 70%, red, yellow, black)}
        .b:nth-child(6) {
            background-image: radial-gradient(farthest-side at 70% 70%, red, yellow, black)}
        .b:nth-child(7) {
            background-image: radial-gradient(farthest-corner at 70% 70%, red, yellow, black)}
        .b:nth-child(8) {
            background-image: repeating-radial-gradient(red, yellow 10%, green 15%)}
    </style>
</head>
<body>
    <div class="box_1">
        <div class="box_2"><!--线性渐变-->
            <div class="a">1.从上到下</div>
            <div class="a">2.从左到右</div>
            <div class="a">3.从左上角到右下角</div>
            <div class="a">4.带有指定的角度</div>
            <div class="a">5.带有多个颜色节点</div>
            <div class="a">6.彩虹颜色和文本</div>
            <div class="a">7.带有透明度</div>
            <div class="a">8.重复</div>
            <div class="a">9.无</div>
        </div>
        <div class="box_2"><!--径向渐变-->
            <div class="b">1.颜色节点均匀分布</div>
            <div class="b">2.颜色节点不均匀分布</div>
            <div class="b">3.形状为圆形</div>
            <div class="b">4.渐变的大小</div>
            <div class="b">5.渐变的大小</div>
            <div class="b">6.渐变的大小</div>
            <div class="b">7.渐变的大小</div>
            <div class="b">8.重复</div>
        </div>
    </div>
</body>
</html>

渐变颜色随机生成的网页

uiGradients - Beautiful colored gradients