css渐变_CSS渐变

css渐变

In earlier lessons, we read about the background property, along with background-image and background-color properties. Instead of setting an image for a background, you can use a gradient too. Not using an actual image file but a gradient background, results in far better performance of the webpage and better control over the design.

在较早的课程中，我们了解了background属性以及background-image和background-color属性。 您也可以使用渐变来代替为背景设置图像。 不使用实际的图像文件，而是使用渐变背景，可以使网页的性能更好，并可以更好地控制设计。

So what is a Gradient? A gradient is one color fading into another. In CSS you can control the colors and the changing pattern of gradients to modify them the way you want.

那么什么是渐变呢？ 渐变是一种颜色逐渐淡入另一种颜色。 在CSS中，您可以控制颜色和渐变样式，以所需方式对其进行修改。

Remember that we used background-color to set the color of the background earlier. However for gradients we use background-image

请记住，我们之前使用background-color设置了背景色。 但是，对于渐变，我们使用background-image

.gradient{ 
    background-image: linear-gradient(red, orange);
}

线性渐变 (Linear-gradients)

This is the most common and useful gradient type. The gradients axis can go from left-to-right, top-to-bottom, or at any angle you chose. If you do not declare an angle, the axis is assumed to be top-to-bottom. You can use hexa code or named colors or RGB values, to specify the colors.

这是最常见和有用的渐变类型。 渐变axis可以从左到右，从上到下或您选择的任何角度移动。 如果未声明角度，则假定该轴为从上到下。 您可以使用十六进制代码或命名的颜色或RGB值来指定颜色。

.gradient {
 	background-image: linear-gradient(to right, red, #f06d06 );	
}

To make it left-to-right, we pass an additional parameter at the beginning of the linear-gradient() function arguments, by using the word to, indicating the direction, for example, "to right". This syntax works for corners as well.

为了使其从左到右，我们在linear-gradient()函数参数的开头传递了一个附加参数，方法是使用单词to ，指示方向，例如“ to right” 。 此语法也适用于角落。

For instance if you wanted the axis of the gradient to start at the bottom left corner and go to the top right corner, you could say "to top right".

例如，如果您希望渐变的轴从左下角开始到右上角，则可以说“到右上角” 。

You can use as many colors as you want to make a gradient.

您可以使用任意多种颜色来制作渐变色。

.gradient {
    background-image:linear-gradient(to right, red, #3366ff, rgb(255, 255, 0), green);	
}

Live Example →

现场示例→

径向渐变 (Radial-gradients)

Radial gradient differs from linear in the way that it starts from a single point and spread outwards. Gradients are often used to simulate a lighting effect, so they can be useful to make a gradient seem even more natural.

径向梯度与线性梯度的区别在于它从单个点开始并向外扩展。 渐变通常用于模拟照明效果，因此可以使渐变看起来更加自然。

The default setting is that the first color starts in the (center) of the element and fades to the end color towards the edge of the element. The fading happens at an equal rate no matter which direction. The default style of fading is an ellipse, but can be forced to a circle style too.

默认设置是第一种颜色从元素的(中心)开始，然后逐渐向元素的边缘逐渐淡出为最终的颜色。 无论哪个方向，衰落均以相等的速率发生。 淡入淡出的默认样式是椭圆形 ，但也可以强制为圆形样式。

Example:

例：

/* default ellipse */
.gradient {
  	background-image:radial-gradient(yellow, #3366ff );	
}

/* changing the fading to circle form */
.gradient {
  	background-image:radial-gradient(circle, yellow, #3366ff );	
}

Live Example →

现场示例→

The following browsers support both linear and radial gradients:

以下浏览器同时支持线性和径向渐变：

• Chrome 26+

  Chrome26+

• Firefox 16+

  Firefox 16+

• IE 10+

  IE 10以上

• Opera 15+

  歌剧15+

• Safari 6.1+

  Safari 6.1+

There is also a third kind of gradient, that is, repeating gradient. However not many browsers support this type as of now.

还有第三种梯度，即repeating gradient 。 但是，到目前为止，没有多少浏览器支持此类型。

You can have a lot of fun with gradients. They are better options in terms of performance as compared to a background-image and they look more natural.

渐变可以带来很多乐趣。 与background-image相比，它们在性能方面是更好的选择，并且看起来更自然。

翻译自: https://www.studytonight.com/cascading-style-sheet/css-gradients

css渐变