Home >Web Front-end >CSS Tutorial >How to write css gradient color? css linear gradient syntax
How to write css gradient color? css linear gradient syntax
- 云罗郡主forward
- 2018-11-19 11:54:065555browse
#This article brings you how to write css gradient color? CSS linear gradient syntax has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Introduction to linear gradient
In CSS3, linear gradient refers to a gradient on a straight line. In web pages, most gradient effects are linear gradients.
Syntax:
background:linear-gradient（方向，开始颜色，结束颜色）；
Description:
There are two types of direction values for linear gradients, one is to use angle (deg), and the other is to use keywords:
Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3线性渐变</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:linear-gradient(to right,blue,yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>The effect is as follows:
Analysis:
“background: linear-gradient (to right ,blue,yellow);" means the linear gradient direction is "from left to right", the starting color is blue (blue), and the ending color is yellow (yellow).
If you use "background: linear-gradient (to left, blue, yellow);", the browser preview effect is as follows:
Be special here Pay attention to the direction of the linear gradient. If the color value is the same, the actual effect will be different due to the different gradient directions.
Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3线性渐变</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
}
</style>
</head>
<body>
<div></div>
</body>
</html>The effect is as follows:
The above is how to write css gradient color? A complete introduction to css linear gradient syntax. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of How to write css gradient color? css linear gradient syntax. For more information, please follow other related articles on the PHP Chinese website!