How to achieve background linear gradient in css3

WBOY
Release: 2021-12-16 13:59:00
Original
1913 people have browsed it

In CSS, you can use the "background-image" attribute and the "linear-gradient()" function to achieve a linear gradient of the element background. The syntax is "element {background-image:linear-gradient(gradient direction, color) 1, color 2..)”.

How to achieve background linear gradient in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to realize linear gradient of background in css3

If you want to realize linear gradient of element background in css, you need to use the background-image attribute.

The background-image attribute is used to set the background style of the element. When this attribute is used in conjunction with the linear-gradient() function, the background of the element can be set to a linear gradient style.

The linear-gradient() function is used to create an image that represents a linear gradient of two or more colors.

To create a linear gradient, you need to specify two colors. You can also achieve gradient effects in different directions (specified as an angle). If the direction is not specified, the gradient will default from top to bottom.

The example is as follows:

   123  

从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色:

Copy after login

Output result:

How to achieve background linear gradient in css3

(Learning video sharing:css video tutorial)

The above is the detailed content of How to achieve background linear gradient in css3. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!