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小时内删除。
发表评论