渐变背景:linear-gradient | radial-gradient

Wandra
310 阅读3分钟

每日思考：把世界看成两个部分，你关注到的以及你能影响到的，不要过度在意你关注到的，也要去做你能影响到的。在你独特的旅程中，你决定如何投射并丰富你旅途的细节呢? 🍀

如果对你有帮助的话，别忘了点个赞奥✨✨

本质作用

使您可以显示两种或多种指定颜色之间的平滑过渡。

渐变分类

线性渐变（向下/向上/向左/向右/对角线）

如需创建线性渐变，您必须定义至少两个色标（ 是您要呈现平滑过渡的颜色 ）， 还可以设置方向（默认从上到下） 和色标起点。

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

各个值的演示视频

CleanShot 2024-09-17 at 15.48.27.gif

案例

#grad {

  // 从左到右
  background-image: linear-gradient(to right, red , yellow); 

  // 从左上角到右下角
  background-image: linear-gradient(to bottom right, red, yellow); 

   // 从右到左,设置角度。
  background-image: linear-gradient(-90deg, red, yellow);

  // 从下到上
  background-image: linear-gradient(0deg, red, yellow); 

  // 从上到下，多个色标
  background-image: linear-gradient(red, yellow, green); 

  // 从左到右，多个色标
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);  

  // CSS 渐变还支持透明度，使用 rgba() 函数来定义色标，
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 

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

}
径向渐变（由其中心定义）

限制：径向渐变由其中心定义，如需创建径向渐变，您还必须定义至少两个色标。

语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

1️⃣ 默认地，shape 为椭圆形，size 为最远角，position 为中心。

2️⃣ 每个值的详细解释：

shape： 定义形状。它可接受 circle 或 ellipse 值，默认值为 ellipse（椭圆）

size： 定义渐变的大小。它可接受四个值：closest-side ｜ farthest-side ｜closest-corner ｜farthest-corner

position: 定义渐变的中心位置：默认为50% 50%

3️⃣ 各个值的演示视频：

CleanShot 2024-09-17 at 15.44.04.gif

案例

// 带有均匀间隔的色标的径向渐变：
background-image: radial-gradient(red, yellow, green);

// 色标之间的间隔不同
background-image: radial-gradient(red 5%, yellow 15%, green 60%);

// 一个圆形的径向渐变
background-image: radial-gradient(circle, red, yellow, green);

// 设置了不同 size 关键词的径向渐变
 background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);

// 用于重复径向渐变
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

// 多个渐变叠加
background-image: 
  radial-gradient(closest-side circle, red, red 100%, transparent), 
  linear-gradient(#ccc, #666);

应用场景

加载进度条：www.cnblogs.com/wisewrong/p…

image.png

--color: #67e035;
--position: 60%;
height: 30px;
background-color: #e4e4e4;
border-radius: 15px;
background-repeat: no-repeat;
background-size: 100%, var(--position);
background-image: 
radial-gradient(closest-side circle at var(--position), var(--color), var(--color) 100%, transparent), 
linear-gradient(var(--color), var(--color));

条纹效果：www.cnblogs.com/wisewrong/p…

image.png

image.png

background-image: repeating-linear-gradient(45deg, white, white 5px, black 5px, black 10px);

background-image:
  repeating-linear-gradient(45deg, #b50642, #b50642 10px, transparent 10px, transparent 20px), 
  repeating-linear-gradient(-45deg, #b50642, #b50642 10px, transparent 10px, transparent 20px), 
  linear-gradient(#9bdaf3, #9bdaf3);

文字渐变：segmentfault.com/a/119000001…

image.png

    span {
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }

水波，声波，唱片纹理: www.zhangxinxu.com/wordpress/2…

CleanShot 2024-09-17 at 16.33.04.gif

.radial-gradient {
    position: relative;
    width: 262px; height: 262px;
    border-radius: 50%;
    background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
}
.radial-gradient:after {
    position: absolute;
    top: 50%; left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px; height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
    background: #b5ac9a;
    content: '';
}

支持情况

background-image

image.png

Gradients

image.png

参考资源

如果对你有帮助的话，别忘了点个赞奥

avatar
文章
阅读
粉丝