关于IT基础

↩ zhcn 编程语言 Web相关 JSON 非公開: CSS 渐变 10 分钟上手

CSS 渐变 10 分钟上手

CSS中的渐变是指两种或多种颜色之间的平滑过渡，以前必须使用预定义的图像来实现渐变效果，现在CSS3提供了一种灵活的解决方案。

CSS3 允许定义三种类型的渐变：线性渐变（使用 Linear-gradient() 函数创建）、径向渐变（使用 Radial-gradient() 函数创建）和圆锥形渐变（使用 conic-gradient() 创建）功能） 。创造）。或者，您可以使用repeating-linear-gradient()、repeating-radial-gradient() 和repeat-conic-gradient() 函数创建重复渐变。

使用 CSS 创建的渐变不仅简单灵活，而且还消除了使用图像时所需的加载过程，从而节省了网页加载时间。此外，使用 CSS 创建的渐变元素可以缩放到任何比例，而不会损失质量。

1.线性渐变

线性渐变是沿着直线的颜色渐变（例如，从右上到下、从左到右等）。要创建线性渐变，您必须定义至少两个色标（要创建更复杂的渐变效果，您必须定义更多色标）。创建它的基本语法是：

线性渐变（方向，颜色停止1，颜色停止2，…）；

参数说明如下：

  • Direction 是一个可选值，定义渐变的方向（从左到右、从上到下等），可以用特定角度（例如 90 度）或附加关键字来表示，例如：可以。向左、向右、向上、向下等。例子：
    • 向左：从右向左，相当于270度。
    • to right：从左到右，相当于 90 度。
    • to top：表示从下到上，对应0度。
    • 到底部：默认值。意思是从上到下，对应180度。
    • 到右下：表示从左上到右下。
    • 到右上：意思是从左下到右上。
    • 到左下：表示从右上到左下。
    • 到左上：表示从右下角到左上角。
  • color-stop1, color-stop2, …：表示多个定义的颜色停止点，每个颜色停止点不仅定义一种颜色，还可以以数字和单位的形式定义颜色的开始和结束位置。一个百分比。

[示例] 使用 Linear-gradient() 函数定义线性渐变。

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

执行结果如下图所示。

[标题id =“attachment_772”对齐=“aligncenter”宽度=“1024”] 图：线性梯度（）函数的演示图：线性梯度（）函数的演示[/标题]

2.径向渐变

Radial-Gradient 和 Linear-Gradient 的区别在于，Radial-Gradient 是从中心向外延伸的渐变，你可以指定中心点的位置，也可以设置渐变的形状。定义线性渐变的基本语法是：

径向渐变（位置处的形状大小，颜色停止1，颜色停止2，…）；

参数说明如下：

  • at：必须放在参数位置之前的关键字。
  • position：指定渐变起点的坐标 渐变起点的坐标可以以值和单位、百分比或关键字（left、bottom 等）的形式指定。提供了两个参数。第一个参数用于表示横坐标，第二个参数用于表示纵坐标。如果仅提供一个参数，则第二个参数默认为 50%，即居中。
  • shape：指定渐变的形状。选项值为Circle（圆）、Ellipse（椭圆）。
  • size：指定渐变形状的大小 除了使用具体值指定圆和椭圆的半径外，还可以使用以下关键字指定渐变形状的大小：
    • closest-side：指定径向渐变的半径是从圆心到最接近圆心的一侧。
    • closest-corner：指定径向渐变的半径是从圆心到最接近圆心的角点。
    • farthest-side：默认值指定径向渐变的半径是从圆心到距离圆心最远的一侧。
    • farthest-corner：指定径向渐变的半径是从圆心到距圆心最远的角。
  • color-stop1, color-stop2, …：表示多个定义的颜色停止点，每个颜色停止点不仅定义一种颜色，还可以以数字和单位的形式定义颜色的开始和结束位置。一个百分比。

[示例] 使用 Radial-gradient() 函数定义径向渐变。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .ichi {
            background: radial-gradient(circle at 50%, red, yellow, lime);
        }
        .ni {
            background: radial-gradient(ellipse 100px 30px at 30%, red, yellow, lime);
        }
        .san {
            background: radial-gradient(circle 100px at 50%, red 10%, yellow 50%, lime 100px);
        }
        .shi {
            background: radial-gradient(circle closest-corner at 50px 30px, red, yellow, lime);
        }
    </style>
</head>
<body>
    <div class="ichi"></div>
    <div class="ni"></div>
    <div class="san"></div>
    <div class="shi"></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_773”对齐=“aligncenter”宽度=“1024”] 图：Radial-gradient()函数演示图：Radial-gradient() 函数演示[/caption]

3.圆锥梯度

圆锥渐变与径向渐变类似。两者都有一个中心点作为色标的源点。圆锥渐变围绕中心点旋转（而不是从中心点向外辐射）。是：

圆锥梯度（从位置角度，起始颜色，…，最后颜色）；

语法解释如下：

  • from：必须放在参数角度之前的关键字。
  • 角度：定义圆锥渐变的起始角度。它也可以是空的。默认值为 0 度。
  • at：必须放在参数位置之前的关键字。
  • position：定义锥体渐变的锥体中心的坐标。锥体中心的坐标可以以值和单位、百分比或关键字（left、bottom等）的形式指定。如果指定两个参数，则第一个参数表示横坐标，第二个参数表示纵坐标。如果仅指定一个参数，则第二个参数默认为 50%，即居中。 （中心）;
  • start-color, …, last-color：表示多个定义的色标。每个色标不仅定义颜色，还允许您以百分比或度数定义颜色的起始位置。

[示例] 使用 conic-gradient() 定义圆锥梯度。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .one {
            background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);
        }
       .two {
            background: conic-gradient(red 0deg 30deg, orange 30deg 50deg, yellow 50deg 200deg, green 200deg 300deg, blue 300deg 360deg);
        }
        .three {
            background: conic-gradient(from 90deg, red 0% 55%, yellow 55% 90%, lime 90% 100%);
        }
        .four {
            background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_780”对齐=“aligncenter”宽度=“1024”] 图：conic-gradient()函数的演示图：conic-gradient()函数演示[/caption]
4.重复渐变

在CSS中，您还可以使用Repeat-linear-gradient()、Repeat-radial-gradient()和Repeat-conic-gradient()等函数分别创建线性、径向和圆锥形渐变的重复渐变。重复渐变意味着多次重复渐变过程以覆盖整个元素。

提示：Repeating- Linear-gradient()、repeat-radial-gradient()和repeat-conic-gradient()函数的语法是 ，每个函数都是相同的。

[示例] 要定义重复渐变，请使用repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .one {
            background: repeating-linear-gradient(190deg、#000 0px 10px,#FFF 10px 20px);
        }
       .two {
            background: repeating-radial-gradient(circle 100px at 50%、red 0% 10%、yellow 10% 30%、lime 30% 40%);
        }
        .three {
            background: repeating-conic-gradient(#69f 0 36deg、#fd44ff 36deg 72deg);
        }
        .four {
            background: conic-gradient(#fff 0.25turn、#000 0.25turn 0.5tur, #fff 0.5turn 0.75turn、#000 0.75turn) top left / 25% 25% repeat;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_783”对齐=“aligncenter”宽度=“1024”] 图：重复渐变演示图：重复渐变演示[/caption]

通俗易懂讲解《CSS渐变（颜色渐变）10分钟上手》！您必须观看的最佳 2 个视频

Body Background color animation using linear gradient html and CSS
https://www.youtube.com/shorts/-A5KpKA1KwQ
CSS中的渐变是指两种或多种颜色之间的平滑过渡，以前必须使用预定义的图像来实现渐变效果，现在CSS3提供了一种灵活的解决方案。

CSS3 允许定义三种类型的渐变：线性渐变（使用 Linear-gradient() 函数创建）、径向渐变（使用 Radial-gradient() 函数创建）和圆锥形渐变（使用 conic-gradient() 创建）功能） 。创造）。或者，您可以使用repeating-linear-gradient()、repeating-radial-gradient() 和repeat-conic-gradient() 函数创建重复渐变。

使用 CSS 创建的渐变不仅简单灵活，而且还消除了使用图像时所需的加载过程，从而节省了网页加载时间。此外，使用 CSS 创建的渐变元素可以缩放到任何比例，而不会损失质量。

1.线性渐变

线性渐变是沿着直线的颜色渐变（例如，从右上到下、从左到右等）。要创建线性渐变，您必须定义至少两个色标（要创建更复杂的渐变效果，您必须定义更多色标）。创建它的基本语法是：

线性渐变（方向，颜色停止1，颜色停止2，…）；

参数说明如下：

  • Direction 是一个可选值，定义渐变的方向（从左到右、从上到下等），可以用特定角度（例如 90 度）或附加关键字来表示，例如：可以。向左、向右、向上、向下等。例子：
    • 向左：从右向左，相当于270度。
    • to right：从左到右，相当于 90 度。
    • to top：表示从下到上，对应0度。
    • 到底部：默认值。意思是从上到下，对应180度。
    • 到右下：表示从左上到右下。
    • 到右上：意思是从左下到右上。
    • 到左下：表示从右上到左下。
    • 到左上：表示从右下角到左上角。
  • color-stop1, color-stop2, …：表示多个定义的颜色停止点，每个颜色停止点不仅定义一种颜色，还可以以数字和单位的形式定义颜色的开始和结束位置。一个百分比。

[示例] 使用 Linear-gradient() 函数定义线性渐变。

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

执行结果如下图所示。

[标题id =“attachment_772”对齐=“aligncenter”宽度=“1024”] 图：线性梯度（）函数的演示图：线性梯度（）函数的演示[/标题]

2.径向渐变

Radial-Gradient 和 Linear-Gradient 的区别在于，Radial-Gradient 是从中心向外延伸的渐变，你可以指定中心点的位置，也可以设置渐变的形状。定义线性渐变的基本语法是：

径向渐变（位置处的形状大小，颜色停止1，颜色停止2，…）；

参数说明如下：

  • at：必须放在参数位置之前的关键字。
  • position：指定渐变起点的坐标 渐变起点的坐标可以以值和单位、百分比或关键字（left、bottom 等）的形式指定。提供了两个参数。第一个参数用于表示横坐标，第二个参数用于表示纵坐标。如果仅提供一个参数，则第二个参数默认为 50%，即居中。
  • shape：指定渐变的形状。选项值为Circle（圆）、Ellipse（椭圆）。
  • size：指定渐变形状的大小 除了使用具体值指定圆和椭圆的半径外，还可以使用以下关键字指定渐变形状的大小：
    • closest-side：指定径向渐变的半径是从圆心到最接近圆心的一侧。
    • closest-corner：指定径向渐变的半径是从圆心到最接近圆心的角点。
    • farthest-side：默认值指定径向渐变的半径是从圆心到距离圆心最远的一侧。
    • farthest-corner：指定径向渐变的半径是从圆心到距圆心最远的角。
  • color-stop1, color-stop2, …：表示多个定义的颜色停止点，每个颜色停止点不仅定义一种颜色，还可以以数字和单位的形式定义颜色的开始和结束位置。一个百分比。

[示例] 使用 Radial-gradient() 函数定义径向渐变。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .ichi {
            background: radial-gradient(circle at 50%, red, yellow, lime);
        }
        .ni {
            background: radial-gradient(ellipse 100px 30px at 30%, red, yellow, lime);
        }
        .san {
            background: radial-gradient(circle 100px at 50%, red 10%, yellow 50%, lime 100px);
        }
        .shi {
            background: radial-gradient(circle closest-corner at 50px 30px, red, yellow, lime);
        }
    </style>
</head>
<body>
    <div class="ichi"></div>
    <div class="ni"></div>
    <div class="san"></div>
    <div class="shi"></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_773”对齐=“aligncenter”宽度=“1024”] 图：Radial-gradient()函数演示图：Radial-gradient() 函数演示[/caption]

3.圆锥梯度

圆锥渐变与径向渐变类似。两者都有一个中心点作为色标的源点。圆锥渐变围绕中心点旋转（而不是从中心点向外辐射）。是：

圆锥梯度（从位置角度，起始颜色，…，最后颜色）；

语法解释如下：

  • from：必须放在参数角度之前的关键字。
  • 角度：定义圆锥渐变的起始角度。它也可以是空的。默认值为 0 度。
  • at：必须放在参数位置之前的关键字。
  • position：定义锥体渐变的锥体中心的坐标。锥体中心的坐标可以以值和单位、百分比或关键字（left、bottom等）的形式指定。如果指定两个参数，则第一个参数表示横坐标，第二个参数表示纵坐标。如果仅指定一个参数，则第二个参数默认为 50%，即居中。 （中心）;
  • start-color, …, last-color：表示多个定义的色标。每个色标不仅定义颜色，还允许您以百分比或度数定义颜色的起始位置。

[示例] 使用 conic-gradient() 定义圆锥梯度。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .one {
            background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);
        }
       .two {
            background: conic-gradient(red 0deg 30deg, orange 30deg 50deg, yellow 50deg 200deg, green 200deg 300deg, blue 300deg 360deg);
        }
        .three {
            background: conic-gradient(from 90deg, red 0% 55%, yellow 55% 90%, lime 90% 100%);
        }
        .four {
            background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_780”对齐=“aligncenter”宽度=“1024”] 图：conic-gradient()函数的演示图：conic-gradient()函数演示[/caption]
4.重复渐变

在CSS中，您还可以使用Repeat-linear-gradient()、Repeat-radial-gradient()和Repeat-conic-gradient()等函数分别创建线性、径向和圆锥形渐变的重复渐变。重复渐变意味着多次重复渐变过程以覆盖整个元素。

提示：Repeating- Linear-gradient()、repeat-radial-gradient()和repeat-conic-gradient()函数的语法是 ，每个函数都是相同的。

[示例] 要定义重复渐变，请使用repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .one {
            background: repeating-linear-gradient(190deg、#000 0px 10px,#FFF 10px 20px);
        }
       .two {
            background: repeating-radial-gradient(circle 100px at 50%、red 0% 10%、yellow 10% 30%、lime 30% 40%);
        }
        .three {
            background: repeating-conic-gradient(#69f 0 36deg、#fd44ff 36deg 72deg);
        }
        .four {
            background: conic-gradient(#fff 0.25turn、#000 0.25turn 0.5tur, #fff 0.5turn 0.75turn、#000 0.75turn) top left / 25% 25% repeat;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_783”对齐=“aligncenter”宽度=“1024”] 图：重复渐变演示图：重复渐变演示[/caption]

通俗易懂讲解《CSS渐变（颜色渐变）10分钟上手》！您必须观看的最佳 2 个视频

Body Background color animation using linear gradient html and CSS
https://www.youtube.com/shorts/-A5KpKA1KwQ

最新文章列表

IT基礎ロゴ

这是一个通过简明易懂的方式解说了解IT行业时需要掌握的IT基础知识的网站。

关于IT基础

关于IT基础

使用条款

隐私政策

联系方式

RSS

推荐环境 / 建议环境

科技

新闻

最新技术

人工智能

游戏

Windows

手机

安全

DevOps

网络

数据库

计算机硬件

商业

数字营销

数据可视化

设计

业务运营

客户服务

人力资源管理

协作

销售与市场营销

初创公司

金融科技

平台

Android

IOS

应用程序

Windows

MACOS

网页领域

LINUX

GOOGLE

CHROME BOOK

教育科技

关于IT基础@2024 All rights reseved