HTMLCSS学习笔记（十八）——渐变

最新推荐文章于 2023-07-22 23:27:34 发布

粽子师兄

最新推荐文章于 2023-07-22 23:27:34 发布

阅读量229

点赞数

分类专栏： HTML\CSS 文章标签： html5 html css3 css

本文链接：https://blog.csdn.net/qq_45268602/article/details/108039398

版权

HTML\CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

浏览器内核及私有前缀

在学习渐变前，我们应该了解什么是浏览器内核及私有前缀。
浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。

内核	私有前缀	说明
Trident	-ms-	IE浏览器专属的CSS属性需添加-ms-前缀
Gecko	-moz-	所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
Webkit	-Webkit-	所有基于Webkit引擎的浏览器（如Chrome、Safari）专属
Presto	-o-	Opera浏览器专属的CSS属性需添加-o-前缀

CSS3渐变

CSS3线性渐变

水平渐变：background: linear-gradient(direction, color-stop1, color-stop2, …);
说明：
direction：默认为to bottom，即从上向下的渐变。渐变方向：left right top bottom。
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
对角渐变： background: linear-gradient(to right bottom, red , blue);
说明： to right bottom、to right top、to left bottom、to left top
角度渐变:background: linear-gradient(10deg, red , blue);
说明： 角度是指水平线和渐变线之间的角度

CSS3径向渐变

background: radial-gradient(center, shape, size, start-color, …, last-color);
径向渐变不同于线性渐变，线性渐变是 从“一个方向”向“另一个方向” 的颜色渐变，而径向渐变是 从“一个点”向“四周” 的颜色渐变。
说明：

center：渐变起点的位置，可以为百分比，默认是图形的正中心。
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black);

使用渐变时，加上浏览器私有前缀

使用线性渐变linear-gradient或者径向渐变radial-gradient，没加浏览器私有前缀之前的写法称作标准写法，例如 “linear-gradient(to left,#f00,#0f0);” 或者 “radial-gradient(center,#f00,#0f0);”。加上私有前缀后，语法将与标准语法有一定的区别：

方向前不需要添加 to ，方向与标准（没添加前缀，并且方向前添加 to）相反；
如果要显示与标准的写法一样的效果，需要将方向调换，例如标准写法使用to left，则加前缀的使用right代替to left
-webkit-linear-gradient(left,#f00,#0f0);

CSS3重复性渐变

重复性线性渐变 background: repeating-linear-gradient(red, yellow 10%, green 20%);
重复性径向渐变 background: repeating-radial-gradient(red, yellow 10%, green 20%);

线性渐变：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 30px auto;
        }
        .box1{
            background: linear-gradient(to left,#f00,#0f0);
        }
        .box2{
            background: -webkit-linear-gradient(right,#f00,#0f0);
        }
        .box3{
            background: -webkit-linear-gradient(right,#f00 70%,#0f0 30%);
        }
        .box4{
            background: -webkit-linear-gradient(left top,#f00,#0f0);
        }
        .box5{
            background: -webkit-linear-gradient(30deg,#f00,#0f0);
        }
        .box6{
            background: -webkit-linear-gradient(right,rgb(255,0,0), rgb(255,165,0), rgb(255,255,0), rgb(0,255,0), rgb(0,127,255), rgb(0,0,255), rgb(139,0,255));
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
    <div class="box6">6</div>
</body>
</html>

在这里插入图片描述

径向渐变：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 300px;
            margin: 30px auto;
        }
        .box1{
            background: -webkit-radial-gradient(closest-side, blue, green, yellow, black);
        }
        .box2{
            background: -webkit-radial-gradient(farthest-side, blue, green, yellow, black);
        }
        .box3{
            background: -webkit-radial-gradient(closest-corner, blue, green, yellow, black);
        }
        .box4{
            background: -webkit-radial-gradient(farthest-corner, blue, green, yellow, black);
        }
        .box5{
            background: -webkit-radial-gradient(ellipse, blue, green, yellow, black);
        }
        .box6{
            background: -webkit-radial-gradient(circle, blue, green, yellow, black);
        }
        .box7{
            background: -webkit-radial-gradient(30px 30px, circle, blue, green, yellow, black);
        }
        .box8{
            background: -webkit-radial-gradient(10% 30%, circle, blue 5%, green 10%, yellow, black);
        }
        .box9{
            background: -webkit-radial-gradient(circle, rgb(255,0,0), rgb(255,165,0), rgb(255,255,0), rgb(0,255,0), rgb(0,127,255), rgb(0,0,255), rgb(139,0,255));
        }
    </style>
</head>
<body>
    <div class="box1">closest-side</div>
    <div class="box2">farthest-side</div>
    <div class="box3">closest-corner</div>
    <div class="box4">farthest-corner</div>
    <div class="box5">5</div>
    <div class="box6">6</div>
    <div class="box7">7</div>
    <div class="box8">8</div>
    <div class="box9">9</div>
</body>
</html>

在这里插入图片描述

重复性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            margin: 30px auto;
        }
        .box1{
            background: -webkit-repeating-linear-gradient(red , yellow 10%, green 20%);
        }
        .box2{
            background: -webkit-repeating-radial-gradient(red , yellow 10%, green 20%);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述

粽子师兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTMLCSS学习笔记（十八）——渐变

浏览器内核及私有前缀在学习渐变前，我们应该了解什么是浏览器内核及私有前缀。浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。内核私有前缀说明Trident-ms-IE浏览器专属的CSS属性需添加-ms-前缀Gecko-moz-所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀Webkit-Webkit-所有基于Webkit引擎的浏览器（如Chrome、Safari）专
复制链接

扫一扫

专栏目录