Everyone knows that there is a transitional gradient effect in CSS3, so this time I will share with you how to use transitional gradients and their usage skills. Here is a small example.
CSS3 gradients allow you to display smooth transitions between two or more specified colors.
-Webkit-Gradient Left/Right/Division direction
· Radial Gradients-Define by their central definition
Linear-Gradient (color 1, color 2)
Use of linear gradient:
radial-gradient
Uniform color distribution
background: -webkit-radial-gradient(red, green, blue) ;Color distribution according to percentage
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
Case list:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
#dv{
border:1px solid #000;
width:150px;
height:150px;
/*background: -webkit-radial-gradient(red, green, blue);
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);*/
background: -webkit-radial-gradient( red, yellow, green);
}
</style>
<body>
<div id="dv">
</div>
</div>
</body>
</html>There are so many ways to use transition gradients. For more exciting information, please pay attention to php Chinese website
Otherrelated articles! Related reading:
How to use absolute paths and relative paths in html##Commonly used drawing techniques for Canvas in HTML5
How to display html text vertically
The above is the detailed content of How to create a transition gradient effect in CSS3. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
