渐层色制作图案背景
这篇教学会将 CSS 的线性渐层、放射渐层和圆锥形渐层互相搭配组合，运用多重背景的方式产生圆点图案、正方形图案、三角形图案和立体三角形图案背景。
快速导览：
渐层色制作圆形图案背景
运用渐层色的“radial-gradient() 放射渐层”搭配 background-size 背景尺寸，就能快速做出“圆形”的图案背景，下方的范例会展示单纯的放射渐层、改变水平尺寸、改变垂直尺寸以及同时改变水平垂直尺寸的效果。
<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
margin: 10px;
float: left;
border: 1px solid #000;
background: radial-gradient(#f00 30%, #0000 30%); /* 放射漸層背景，紅色和透明色 */
}
.a {background-size: 50px;} /* 水平 50px，垂直 auto */
.b {background-size: auto 50px;} /* 水平 auto，垂直 50px */
.c {background-size: 50px 50px;} /* 水平 50px，垂直 50px */
</style>
将上述的程序改成“多重背景”，将四个放射渐层的圆心分别定位在“25% 25%”“75% 25%”“75% 75%”和“25% 75%”的位置，就能产生四个不同颜色圆点的图案背景 ( 注意，主要颜色需要搭配透明色，才不会互相干扰 )。
参考：多重背景
<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
margin: 10px;
float: left;
border: 1px solid #000;
/* 多重背景，使用主要顏色 + 透明色 */
background: radial-gradient(at 25% 25%, #f00 10%, #0000 10%),
radial-gradient(at 75% 25%, #0c0 10%, #0000 10%),
radial-gradient(at 75% 75%, #06f 10%, #0000 10%),
radial-gradient(at 25% 75%, #fc0 10%, #0000 10%);
}
.a {background-size: 50px;} /* 水平 50px，垂直 auto */
.b {background-size: auto 50px;} /* 水平 auto，垂直 50px */
.c {background-size: 50px 50px;} /* 水平 50px，垂直 50px */
</style>
渐层色制作四边形图案背景
因为渐层色本身没有四边形的渐层色，必须透过“linear-gradient() 线性线层”搭配 background-size 背景尺寸，用颜色违绕出四边形，围绕的过程中需要注意最后一个渐层色 ( 最下方的渐层色 ) 不需要透明色，摆放在上层的渐层色需要使用透明色。
<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
background: linear-gradient(
#fff 0%, #fff 20%,
#f000 20%, #f000 80%,
#fff 80%),
linear-gradient(to right,
#fff 0%, #fff 20%,
#f00 20%, #f00 80%,
#fff 80%);
margin: 10px;
float: left;
}
.a {background-size: 50px;}
.b {background-size: auto 50px;}
.c {background-size: 50px 50px;}
</style>
修改上述程序码的“多重背景”，底色使用“圆锥形渐层”制作四色底色，搭配上方线性渐层绘制白色空间，就能产生四色四边形的图案效果。
<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
/* conic-gradient 負責製作四個象限四種顏色，linear-gradient 負責產生白邊 */
background:
linear-gradient(to right,
#fff 0%, #fff 15%,
#0000 15%, #0000 35%,
#fff 35%, #fff 65%,
#0000 65%, #0000 85%,
#fff 85%, #fff 100%),
linear-gradient(to bottom,
#fff 0%, #fff 15%,
#0000 15%, #0000 35%,
#fff 35%, #fff 65%,
#0000 65%, #0000 85%,
#fff 85%, #fff 100%),
conic-gradient(
#f00 0, #f00 90deg,
#fc0 90deg, #fc0 180deg,
#0c0 180deg, #0c0 270deg,
#09f 270deg, #09f 360deg);
margin: 10px;
float: left;
}
.a {background-size: 50px;}
.b {background-size: auto 50px;}
.c {background-size: 50px 50px;}
</style>
渐层色制作三角形图案背景
三角形的图案基本上都是透过“linear-gradient() 线性线层”搭配 background-size 背景尺寸所实现，用颜色违绕出三角形，围绕的过程中需要注意最后一个渐层色 ( 最下方的渐层色 ) 不需要透明色，摆放在上层的渐层色需要使用透明色。
<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
/* 三個方向的線性漸層包覆出一個三角形 */
background: linear-gradient(#f000 65%, #fff 65%),
linear-gradient(60deg, #f000 60%, #fff 60%),
linear-gradient(-60deg, #f00 60%, #fff 60%);
margin: 10px;
float: left;
}
.a {background-size: 50px;}
.b {background-size: auto 50px;}
.c {background-size: 50px 50px;}
</style>
四色三角形的背景需要同时使用“圆锥形渐层”和“线性线层”，修改上述程序码的“多重背景”，底色使用放射渐层制作四色底色，搭配上方两组倾斜的线性渐层和一组水平线性渐层绘制白色空间，就能产生四色三角形的图案效果。
<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
/* 最上方是水平白色線，中間兩層為交錯斜白色線，底層為四塊顏色的放色漸層 */
background: linear-gradient(0deg,
#fff 0%, #fff 12.5%,
#fff0 12.5%, #fff0 25%,
#fff 25%, #fff 62.5%,
#fff0 62.5%, #fff0 75%,
#fff 75%, #fff 100%
),
linear-gradient(-45deg,
#fff 0%, #fff 12.5%,
#fff0 12.5%, #fff0 25%,
#fff 25%, #fff 37.5%,
#fff0 37.5%, #fff0 50%,
#fff 50%, #fff 62.5%,
#fff0 62.5%, #fff0 75%,
#fff 75%, #fff 87.5%,
#fff0 87.5%, #fff0 100%
),
linear-gradient(45deg,
#fff 0%, #fff 12.5%,
#fff0 12.5%, #fff0 25%,
#fff 25%, #fff 37.5%,
#fff0 37.5%, #fff0 50%,
#fff 50%, #fff 62.5%,
#fff0 62.5%, #fff0 75%,
#fff 75%, #fff 87.5%,
#fff0 87.5%, #fff0 100%
),
conic-gradient(
#f00 0deg, #f00 90deg,
#fc0 90deg, #fc0 180deg,
#0c0 180deg, #0c0 270deg,
#09f 270deg, #09f 360deg);
margin: 10px;
float: left;
}
.a {background-size: 50px;}
.b {background-size: auto 50px;}
.c {background-size: 50px 50px;}
</style>
渐层色制作立体三角形图案背景
延伸三角形图案的做法，如果要制作“立体三角形”，则需要使用许多组的圆锥形渐层，采用每“60deg”为一个区块单位，先绘制最下层 12 个区块的颜色，接着先遮蔽上下左右，再遮蔽左上、左下、右上和右下，只要将颜色深浅交错，就能产生立体的三角形图案背景。
下方范例会产生重复的立体三角形图案背景。
<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 231px;
height: 200px;
border: 1px solid #000;
--c0: #000;
--c1: #111;
--c2: #222;
--c3: #333;
--c4: #444;
--c5: #555;
--c6: #666;
--c7: #777;
--c9: #999;
background:conic-gradient(at 25% 100%,
#0000 0deg, #0000 270deg,
var(--c5) 270deg, var(--c5) 300deg,
var(--c2) 300deg, var(--c2) 330deg,
#0000 330deg
),
conic-gradient(at 75% 100%,
#0000 0deg, #0000 30deg,
var(--c5) 30deg, var(--c5) 60deg,
var(--c2) 60deg, var(--c2) 90deg,
#0000 90deg
),
conic-gradient(at 75% 0%,
var(--c2) 0deg, var(--c2) 120deg,
var(--c5) 120deg, var(--c5) 150deg,
#0000 150deg
),
conic-gradient(at 25% 0%,
#0000 0deg, #0000 210deg,
var(--c2) 210deg, var(--c2) 240deg,
var(--c5) 240deg, var(--c5) 360deg
),
conic-gradient(at 25% 33.33%,
#0000 0deg, #0000 240deg,
var(--c6) 240deg
),
conic-gradient(at 25% 66.66%,
#0000 0deg, #0000 180deg,
var(--c4) 180deg, var(--c4) 300deg,
#0000 300deg
),
conic-gradient(at 50% 84%,
#0000 0deg, #0000 120deg,
var(--c1) 120deg, var(--c1) 240deg,
#0000 240deg
),
conic-gradient(at 75% 66.66%,
#0000 0deg, #0000 60deg,
var(--c2) 60deg, var(--c2) 180deg,
#0000 180deg
),
conic-gradient(at 75% 33.33%,
var(--c2) 0deg, var(--c2) 120deg,
#0000 120deg
),
conic-gradient(at 50% 16.67%,
var(--c5) 0deg, var(--c5) 60deg,
#0000 60deg, #0000 300deg,
var(--c5) 300deg
),
conic-gradient(
var(--c2) 0deg, var(--c2) 30deg,
var(--c5) 30deg, var(--c5) 60deg,
var(--c3) 60deg, var(--c3) 90deg,
var(--c4) 90deg, var(--c4) 120deg,
var(--c2) 120deg, var(--c2) 150deg,
var(--c4) 150deg, var(--c4) 180deg,
var(--c2) 180deg, var(--c2) 210deg,
var(--c5) 210deg, var(--c5) 240deg,
var(--c3) 240deg, var(--c3) 270deg,
var(--c4) 270deg, var(--c4) 300deg,
var(--c2) 300deg, var(--c2) 330deg,
var(--c4) 330deg, var(--c4) 360deg);
margin: 10px;
float: left;
}
.a {background-size: 50px;}
.b {background-size: auto 50px;}
.c {background-size: 57px 50px;}
</style>
小结
CSS 的多重渐层色可以组合出各种不同的变化，虽然撰写程序码时需要具备填色、角度和图层的观念，但却可以在不用制作图片的状况下快速产生背景图案，是相当有趣实用的技巧。
微信扫码关注
抖音扫码关注