Home >Web Front-end >CSS Tutorial >What are the syntaxes for defining gradients in css3
What are the syntaxes for defining gradients in css3
- WBOYOriginal
- 2021-12-15 11:44:291918browse
Syntax: 1. "background: radial-gradient (type size position, color 1, color n..)" sets the radial gradient style of the element; 2. "background: linear-gradient (direction, color 1) ,Color n..)" sets the linear gradient style of the element.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What are the syntaxes for defining gradients in css3
In css, there is the radial-gradient() function to create radial gradients for elements. The linear-gradient() function creates a linear gradient style for an element.
1. The radial-gradient() function creates an "image" with a radial gradient.
The radial gradient is defined by the center point. In order to create a radial gradient two stop colors must be set.
The syntax is as follows:
background: radial-gradient(shape size at position, start-color, ..., last-color);
The attribute values are as follows:
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>Output result:
2. The linear-gradient() function is used to create a picture 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 syntax is as follows:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(red, yellow, blue);
}
</style>
</head>
<body>
<h3>线性渐变 - 头部到底部</h3>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of What are the syntaxes for defining gradients in css3. For more information, please follow other related articles on the PHP Chinese website!