📜  CSS 渐变色

📅  最后修改于: 2020-11-05 09:32:27             🧑  作者: Mango

CSS 渐变

CSS渐变用于显示两种或多种指定颜色的平滑过渡。

为什么使用CSS渐变

这些是使用CSS渐变的以下原因。

  • 您不必使用图像来显示过渡效果。
  • 下载时间和带宽使用量也可以减少。
  • 缩放时,它可以为元素提供更好的外观,因为渐变是由浏览器生成的。

CSS3中有两种类型的渐变。

    • 线性渐变
    • 径向渐变

1)CSS线性渐变

CSS3线性渐变向上/向下/向左/向右倾斜。要创建CSS3线性渐变,必须定义两个或多个色标。色标是用于创建平滑过渡的颜色。起点和方向也可以与渐变效果一起添加。

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

(i)CSS线性渐变:(从上到下)

从上到下的线性渐变是默认的线性渐变。让我们以从顶部开始的线性渐变为例。它从红色开始,然后过渡到绿色。







Linear Gradient - Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to green:

输出:

Linear Gradient – Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to green:

(ii)CSS线性渐变:(从左到右)

以下示例显示了从左到右的线性渐变。它从左侧开始为红色,然后过渡为绿色。







Linear Gradient - Left to Right

This linear gradient starts at the left. It starts red, transitioning to green:

输出:

Linear Gradient – Left to Right

This linear gradient starts at the left. It starts red, transitioning to green:

(iii)CSS线性渐变:(对角线)

如果同时指定水平和垂直起始位置,则可以使线性渐变对角线。







Linear Gradient - Diagonal

This linear gradient starts at top left. It starts red, transitioning to green:

输出:

Linear Gradient – Diagonal

This linear gradient starts at top left. It starts red, transitioning to green:

2)CSS径向渐变

您必须至少定义两个色标才能创建径向渐变。它由其中心定义。

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

(i)CSS径向渐变:(均匀间隔的色标)

默认情况下,均匀间隔的色标是径向渐变。默认情况下,其形状为Eclipse,尺寸为最远,位置为中心。







Radial Gradient - Evenly Spaced Color Stops

输出:
Radial Gradient – Evenly Spaced Color Stops

(ii)径向渐变:(不同间距的色标)







Radial Gradient - Differently Spaced Color Stops

输出:
Radial Gradient – Differently Spaced Color Stops

支持的浏览器

该表指定了完全支持渐变属性的第一个浏览器版本。

property chrome firefox ie opera safari
linear-gradient 26.0
10.0-webkit-
16.0
3.6-moz-
10.0 12.1
11.1-o-
6.1
5.1-webkit-
radial-gradient 26.0
10.0-webkit-
16.0
3.6-moz-
10.0 12.1
11.1-o-
6.1
5.1-webkit-
repeating-linear-gradient 26.0
10.0-webkit-
16.0
3.6-moz-
10.0 12.1
11.1-o-
6.1
5.1-webkit-
repeating-radial-gradient 26.0
10.0-webkit-
16.0
3.6-moz-
10.0 12.1
11.1-o-
6.1
5.1-webkit-