css颜⾊渐变代码:
background-image: linear-gradient() 线性渐变
background-image: radial-gradient( ) 径向渐变
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<style>
10    div{
渐变颜代码大全11        width: 200px;
12        height: 30px;
13        border: 1px solid rebeccapurple;
14        background-image: linear-gradient(to right,red,blue);
15        /* 表⽰线性渐变,⽅向向右,从红⾊开始到蓝⾊ */
16        background-image: linear-gradient(to top,red,blue);
17        /* 表⽰向上进⾏线性渐变 */
18
19    }
20    #abc{
21        width: 200px;
22        height: 200px;
23        background-image: radial-gradient( red,blue,pink);
24    }
25</style>
26<body>
27    <div></div>
28    <!-- background-image: linear-gradient() 线性渐变 -->
29    <div id="abc"></div>
30    <!-- background-image: radial-gradient( ) 径向渐变 -->
31</body>
32</html>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。