元素的渐变

最新推荐文章于 2024-04-20 20:01:08 发布

云叶知秋

最新推荐文章于 2024-04-20 20:01:08 发布

阅读量918

点赞数

分类专栏：前端学习笔记文章标签： css 前端 css3 html

本文链接：https://blog.csdn.net/zkq5168/article/details/132264584

版权

前端学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、渐变的概念

渐变就是多种颜色平缓变化的一种显示效果

渐变的主要因素是色标。色标是一种颜色及其出现位置的组合。一个渐变是由多个色标组成（至少两个）。

渐变种类：线性渐变、径向渐变、重复渐变

1、线性渐变

线性渐变：以直线的方向来填充渐变色，如下图
请添加图片描述

2、径向渐变：指以圆形的方式来填充渐变色。填充方向以圆心为中心，延半径向外渐变
请添加图片描述

3、重复渐变

将线性渐变或径向渐变，重复几次实现渐变填充

二、线性渐变

1、基础线性渐变：需要设置两个或两个以上的颜色，颜色之间使用“,”分隔，颜色会平均分配，根据设置颜色的顺序进行渐变

<!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>
        .box{
            width: 300px;
            height: 300px;
            background: linear-gradient(red, black);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果
请添加图片描述
上述的例子是基础线性渐变的例子，其实就是进阶渐变的默认模式，设置两个颜色，默认从起点色标渐变到终点色标

2、进阶线性渐变

我们可以通过进阶线性渐变来更加细粒度的控制渐变，格式如下

background: linear-gradient(color1 percent/pixel,color2 percent/pixel);

先修改background属性如下

background: linear-gradient(red 70%, black 100%)

效果图
请添加图片描述
可以发现从0~70%都是纯色的红色，从70%到100%是红色到黑色的渐变

接下来把background设置成如下值

background: linear-gradient(red 70%, black 70%);

效果
请添加图片描述
linear-gradient(color1 degree1， color2 degree2)

对上述的参数进行下解释

color1：起点色标值

degree1：从0%到degree1的部分都用color1填充，取值可以是百分比或具体的像素值

color2：结束色标值

degree2：从degree2到100%的部分都用color2填充，跟color1没有有重叠的部分进行渐变，也就是degree1到degree2部分进行渐变，取值可以是百分比或具体的像素值

例如：background: linear-gradient(red 70%, black 100%);表示从0_{70%是红色，从100%开始是黑色，从70%}100%是红到黑的渐变色

3、设置渐变方向

另外还可以设置线性渐变方向，默认从上到下，设置参数在起点颜色前面传递参数

background: line-gradient(to left top, red 150px, black 300px);

上述的css属性会设置一个从右下角到左上角的线性渐变，颜色从红到黑0_{150px是纯红色，150px}300px是红色到黑色的渐变色，从300px到最后是纯黑色
请添加图片描述

也可以通过第一个参数设置角度，同样可以实现渐变方向，顺时针为正数，逆时针为负数

background: line-gradient(45deg, red 150px, black 300px);

上述属性设置是设置一个顺时针旋转45度后的线性渐变效果，效果如下
请添加图片描述
4、设置多个颜色

background: linear-gradient(color1 percent/pixel,color2 percent/pixel,color3 percent/pixel,...);

通过设置线性渐变可以实现一些特殊的效果，比如信封的边框效果

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>
        .box{
            width: 500px;
            height: 500px;
            border: 10px solid transparent;
            background: linear-gradient(#fff,#fff) padding-box,
            repeating-linear-gradient(
                -45deg,
                red 0, 
                red 10px,
                transparent 10px,
                transparent 20px,
                blue 20px,
                blue 30px,
                transparent 30px,
                transparent 40px);
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

效果
请添加图片描述
二、径向渐变

径向渐变-由他们的中心定义，同样是修改background-image属性，只不过值为rradial-gradient()命令。

radial-grident()命令的语法格式如下：radial-gradient([半径长 at 圆心位置], 色标1, 色标2, …)。

其中，半径长是一个数值，单位px，表示渐变扩散的范围大小。位置，表示渐变中心点的坐标
请添加图片描述

基础径向渐变：需设置两个及两个以上的颜色，颜色之间用","间隔，颜色会平均分配，根据设置颜色的顺序，进行渐变

下面通过例子来了解一下

<!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>
        .box{
            width: 300px;
            height: 300px;
            background-image: radial-gradient(red, black);
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

效果
请添加图片描述

我们可以看到默认是以元素的中心点为圆心，元素宽的一半为半径

接下来我们调整一下参数来看看显示效果有什么变化

调整圆心点

background-image: radial-gradient(150px at top left, red, black);

效果
请添加图片描述
半径长还可以设置一些常量：closest-side/farthest-side/closest-corner/farthest-corner

closest-side:半径长度为从圆心到离圆心最近的边

farthest-size:半径长度为从圆心到离圆心最远的边

closest-corner:半径长度为从圆心到离圆心最近的角

farthest-corner:半径长度为从圆心到离圆心最远的角

我们可以通过例子加深一下印象

background-image: radial-gradient(closest-side at 60% 30%, red, black);

效果
请添加图片描述
也可以给径向渐变设置多种颜色，例如

background-image: radial-gradient(400px at top left, blue 0%, yellow 50%, red 100%);

效果
请添加图片描述
三、应用场景

这种功能的使用场景我个人感觉实际使用的地方比较少，大家有个认识，后续如果有需要的时候再回来查看。

云叶知秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录