How does CSS set up gradients?
May 29, 2021 Article blog
The previous W3Cschool combo showed you how CSS adds gradients to borders, so today's little editor teaches you how to set up gradients.
Let's first look at the final effect:
The above are linear gradients and radial gradients. Gradients are generally set in the background and correspond to elements.
The following is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变色 - 编程狮(w3cschool.cn)</title>
<style type="text/css">
#box1{ /*线性渐变*/
width: 500px;
height: 200px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#eb5757, endColorStr=#000000); /*IE 6 7 8*/
background: -ms-linear-gradient(top, #eb5757, #000000);/*IE 10 */
background: -moz-linear-gradient(top, #eb5757, #000000);/*火狐*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5757),to(#000000));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5757),to(#000000));/*Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #eb5757, #000000);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #eb5757, #000000);/*Opera 11.10+*/
}
#box2{ /*径向渐变*/
width:500px;
height:200px;
background: -webkit-radial-gradient(#eb5757, #000000); /*Safari 5.1 - 6.0 */
background: -o-radial-gradient(#eb5757, #000000); /*Opera 11.6 - 12.0*/
background: -moz-radial-gradient(#eb5757, #000000); /*Firefox 3.6 - 15*/
}
</style>
</head>
<body>
<div id="box1"></div>
<p id="box2"></p>
</body>
</html>These are the full contents of how CSS sets up gradients, and ask the students to practice consolidation on their own.