【css】渐变-背景渐变、边框渐变、文字渐变

最新推荐文章于 2024-08-21 09:04:44 发布

拙慕JULY

最新推荐文章于 2024-08-21 09:04:44 发布

阅读量811

点赞数 2

分类专栏：前端 css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_42357865/article/details/129819664

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS创建线性渐变和径向渐变，包括设置渐变方向、颜色停靠点以及不同形状和大小的径向渐变。示例代码展示了从不同方向、角度应用渐变，以及在背景、边框和文字中的应用。

摘要由CSDN通过智能技术生成

渐变

● 线性渐变（向下/向上/向左/向右/对角线）
● 径向渐变（由其中心定义）

线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

● direction 可选值，定义渐变的方向（例如从左到右，从上到下），可以是具体角度（例如 90deg），也可以通过 to 加 left、right、top、bottom 等关键字来表示渐变方向;
● color-stop1、color-stop2、…：表示定义的多个色标，在每个色标中除了可以定义颜色外，还可以通过数值加单位或者百分比的形式定义颜色的起止位置。

🌰

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 50px;
            float: left;
            margin: 10px;
        }
        .one {
            background: linear-gradient(to right bottom, red, blue 70px);
        }
        .two {
            background: linear-gradient(190deg, #000, #FFF);
        }
        .three {
            background: linear-gradient(red, green, blue);
        }
        .four {
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

在这里插入图片描述

径向渐变

background-image:radial-gradient(shape size at position, color-stop1, color-stop2, ...);

● at：一个关键字，需要放置在参数 position 的前面；
● position：指定渐变起点的坐标，您可以使用数值加单位、百分比或者关键字（例如 left、bottom 等）等形式指定渐变起点的坐标，如果提供 2 个参数，那么第一个参数用来表示横坐标，第二个参数用来表示纵坐标，如果只提供一个参数，那么第二个参数将被默认设置为 50%，即 center；
● shape：指定渐变的形状，可选值为 circle（圆形）、ellipse（椭圆）；
● size：指定渐变形状的大小，除了可以使用具体的数值来指定 circle、ellipse 的半径外，还可以使用下面所示的关键字来指定渐变形状的大小：
○ closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
○ closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
○ farthest-side：默认值，指定径向渐变的半径长度为从圆心到离圆心最远的边；
○ farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。
● color-stop1、color-stop2、…：表示定义的多个色标，在每个色标中除了可以定义颜色外，还可以通过数值加单位或者百分比的形式定义颜色的起止位置。
在这里插入图片描述

背景渐变

//渐变(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));

//渐变(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

边框渐变

/* 边框渐变 */
.border-grident{
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

文字渐变

background-image: linear-gradient(to top, #00C6FF, #8AFFD2); /* 线性渐变背景，方向向上 */
background-clip: text;/* 以文字的范围来裁剪背景图片 */
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */