34.html5的线性渐变和径向渐变

最新推荐文章于 2021-07-29 19:07:42 发布

Keeling1720

最新推荐文章于 2021-07-29 19:07:42 发布

阅读量686

点赞数 2

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/116353314

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

文章目录

html5的线性渐变和径向渐变
- 线性渐变（linear-gradient()）
- 径向渐变(radial-gradient())

html5的线性渐变和径向渐变

渐变是图片，需要通过background-image来设置

线性渐变（linear-gradient()）

使用属性：background-image:linear-gradient(方向/角度/圈，颜色1，颜色2，…，颜色n)来设置。（多个颜色默认情况下平均分布）
方向可以是to top、to bottom、to left、to right、to top left、to top right、to bottom left、to bottom right。
比如，你要让他从左往右，那就是background-image:linear-gradient(to right，颜色1，颜色2，…，颜色n)，希望是
角度是xxdeg。
比如你希望他是45度，那就是background-image:linear-gradient(45deg，颜色1，颜色2，…，颜色n)
圈是x.xturn
比如，你希望他转半圈，那就是background-image:linear-gradient( .5turn，颜色1，颜色2，…，颜色n)

例如：background-image:linear-gradient(方向，颜色1，颜色2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-image: linear-gradient(to right,red,yellow);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

显示：
在这里插入图片描述
当设置45deg的时候，显示如下：（箭头是我自己打的，为了说明是从那个方向到哪个方向）

当设置为0turn和 .5turn的时候，分别显示如下：

径向渐变(radial-gradient())

使用属性：
background-image: radial-gradient(大小 at 位置,颜色位置,颜色位置,颜色位置…)来设置。（多个颜色默认情况下平均分布）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-image: radial-gradient(red,yellow,#bfa);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

显示如下：
在这里插入图片描述
我们也可以手动设置径向渐变的大小：(注意：x和y中间是空格)
background-image: radial-gradient(xpx ypx,颜色1,颜色2);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-image: radial-gradient(50px 100px,red,yellow,#bfa);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

显示：
在这里插入图片描述
我们还可以使用at来指定位置，格式如下：
background-image: radial-gradient(xpx ypx at left top,颜色1,颜色2);
或者不指定圆的大小，直接指定照射的角度
background-image: radial-gradient(at left top,颜色1,颜色2);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-image: radial-gradient(50px 100px at top left,red,yellow,#bfa);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-image: radial-gradient(at top left,red,yellow,#bfa);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

Keeling1720

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
34.html5的线性渐变和径向渐变

文章目录html5的线性渐变和径向渐变线性渐变（linear-gradient()）径向渐变html5的线性渐变和径向渐变渐变是图片，需要通过background-image来设置线性渐变（linear-gradient()）使用属性：background-image:linear-gradient(方向/角度，颜色1，颜色2)来设置。方向可以是to top、to bottom、to left、to right、to top left、to top right、to bottom left、to
复制链接

扫一扫

专栏目录