css 渐变

最新推荐文章于 2023-07-07 16:05:03 发布

深浅Java

最新推荐文章于 2023-07-07 16:05:03 发布

阅读量444

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_46813809/article/details/120214682

版权

渐变

background-image背景也可以创建渐变，但不是背景图片，该函数也可以设置多个颜色。

linear-gradient()

该函数用于创建两个或者多个颜色线性渐变的图片。也可以改变渐变方向。

linear-gradient(red ,yellow); 从上到下红色渐变成黄色。
linear-gradient(45deg, red, yellow)；逆时针渐变45度，红色渐变黄色。
linear-gradient(to right top, red, yellow)；相当于45度角渐变。

45度角渐变
4. linear-gradient(45deg, yellow, green 50%, orange)；逆时针45度，黄色开始，渐变50%后就是绿色，最后是橘色。

多样变换
radial-gradient()

该函数用于创建径向渐变图像。径向渐变以中心点为标准。

radial-gradient(值1  值2 at 值3, color1....colorn);

值1 代表中心向四周呈现的形状类型，
1. ellipse 默认，形成的是椭圆形的形状
2. circle 形成正圆的形状。
值2代表渐变的大小。
值3 代表渐变的位置。
1. center 默认，设立中间为径向渐变的坐标
2. top 设立顶部为径向渐变的坐标。
3. bottom 设立底部为径向渐变的坐标。
可以添加多种颜色

示例

<style>
    div {
        width: 600px;
        height: 400px;
        margin: auto;
        margin-top: 100px;
        background-image: radial-gradient(circle closest-corner at bottom, red, yellow);
    }
</style>

<body>
    <div class="ni">

    </div>
</body>

设置中心点圆角
repeating-linear-gradient()

该函数创建重复线性渐变的图像，

 repeating-linear-gradient( 度数 或者 to 位置, 颜色);

度数值得0deg到360deg，默认是180deg。
位置与度数任意一个，位置是上下左右，配合着用，但对立的方位不能使用，也是可选的。
颜色可以是很多种，中间插入多种颜色。

<style>
    div {
        width: 600px;
        height: 400px;
        margin: auto;
        margin-top: 100px;
        background-image: repeating-linear-gradient(0deg, red, yellow 10%, green 20%);
    }
</style>

<body>
    <div class="ni">

    </div>
</body>

图片渐变
repeating-radial-gradient()

创建重复径向渐变的图像，默认都是以中心点为坐标。

repeating-radial-gradient(值1 值2 to 值3 , 值4)

值1 代表中心向四周呈现的形状类型，
1. ellipse 默认，形成的是椭圆形的形状
2. circle 形成正圆的形状。
值2代表渐变的大小。
值3 代表渐变的位置。
1. center 默认，设立中间为径向渐变的坐标
2. top 设立顶部为径向渐变的坐标。
3. bottom 设立底部为径向渐变的坐标。
值4 可以添加多种颜色，最少两种。

<style>
    div {
        width: 600px;
        height: 400px;
        margin: auto;
        margin-top: 100px;
        background-image: repeating-radial-gradient(red, yellow 15%, green 22%);
    }
</style>

<body>
    <div class="ni">

    </div>
</body>

重复径向渐变图像

深浅Java

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 渐变

渐变background-image背景也可以创建渐变，但不是背景图片。** linear-gradient() **该函数用于创建两个或者多个颜色线性渐变的图片。也可以改变渐变方向。linear-gradient(red ,yellow); 从上到下红色渐变成黄色。linear-gradient(45deg, red, yellow)；逆时针渐变45度，红色渐变黄色。linear-gradient(to right top, red, yellow)；相当于45度角渐变。4..
复制链接

扫一扫