English (US) 
Español (ES) 
Português (PT) 
Français (CA) 
Español (MX) 
Español (VE) 
Español (CO) 
Español (AR) 
Português (BR) 
Quechua (PE) 
Guaraní (PY) 
简体中文 (ZH) 
繁體中文 (HK) 
日本語 (JP) 
한국어 (KR) 
हिन्दी (HI) 
Pilipino (PH) 
ไทย (TH) 
Tiếng Việt (VN) 
Bahasa Melayu (MY) 
Bahasa Indonesia (ID) 
বাংলা (BD) 
اردو (PK) 
සිංහල (LK) 
ភាសាខ្មែរ (KH) 
English (UK) 
Français (FR) 
Deutsch (DE) 
Italiano (IT) 
Русский (RU) 
Nederlands (NL) 
Türkçe (TR) 
Polski (PL) 
Svenska (SE) 
Norsk (NO) 
Dansk (DK) 
Suomi (FI) 
Ελληνικά (GR) 
Čeština (CZ) 
Magyar (HU) 
Română (RO) 
Български (BG) 
Српски (RS) 
Українська (UA) 
css渐变多个背景
由 
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
请先登录才能参与答题
