css渐变多个背景
AI摘要
由 
Deepseek提供支持
Deepseek提供支持<style>
html {
background: -webkit-linear-gradient(left, yellow, red);
background: linear-gradient(to left, yellow, red);
height: 100%;
}
body {
font: 14px/1.5 courier;
color: #000;
}
p {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px 0 0 20px;
float: left;
border: 1px solid yellow;
}
#gradient1 {
background: #888 url(images/gradientLinear.jpg) repeat-x; /* Background images can be used for browsers that aren't capable of producing gradients */
background: -webkit-linear-gradient(yellow, red); /* Backup for major browsers that can still handle gradients */
background: linear-gradient(yellow, red); /* The CSS3 standard */
}
#gradient2 {
background: -webkit-linear-gradient(right, yellow, red);
background: linear-gradient(to right, yellow, red);
}
#gradient3 {
background: -webkit-linear-gradient(bottom right, yellow, red);
background: linear-gradient(to bottom right, yellow, red);
}
#gradient4 {
background: -webkit-linear-gradient(20deg, yellow, red);
background: linear-gradient(20deg, yellow, red);
}
#gradient5 {
background: -webkit-linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));
background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));
}
#gradient6 {
background: -webkit-linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);
background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);
}
</style>
</head>
<body>
<p id="gradient1"><code>background: linear-gradient(yellow, red);</code></p>
<p id="gradient2"><code>background: linear-gradient(to right, yellow, red);</code></p>
<p id="gradient3"><code>background: linear-gradient(to bottom right, yellow, red);</code></p>
<p id="gradient4"><code>background: linear-gradient(20deg, yellow, red);</code></p>
<p id="gradient5"><code>background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));</code></p>
<p id="gradient6"><code>background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);</code></p>
预览：
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ，欢迎您的访问!
文章链接：https://www.lilianhua.com/css-gradient-multiple-backgrounds.html
文章链接：https://www.lilianhua.com/css-gradient-multiple-backgrounds.html
请先登录才能参与答题
