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!