-
线性渐变：linear-gradient()
用于创建一个表示两种或者多种颜色线性渐变的图片
linear-gradient(side-or-corner, angle, linear-color-stop, color-hint) side-or-corner: 描述渐变线的起始点位置 angle: 用角度值制定渐变方向 linear-color-stop: 渐变色终止的位置 color-hint: 颜色中转点示例1:background: linear-gradient(to left, #333, #333 30%, #eee 70%, #333 10%);
示例2:
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-
径向渐变：radial-gradient()
由从原点出发的两种或者多种颜色之间的逐步过渡
radial-gradient(position, shape, size, color-stop, extent-keyword) position: 图像初始位置 shape: 渐变的形状 size: 渐变尺寸的大小 color-stop: 某个确定位置的固定色值 extent-keyword: 描述边缘轮廓的具体位置 linear-color-stop: 渐变色终止的位置 color-hint: 颜色中转点
示例1:
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
示例2:`
background: radial-gradient(ellipse at top, #e66465, transparent),
radial-gradient(ellipse at bottom, #4d9f0c, transparent);
示例3:
radial-gradient(closest-side circle at 50px 50px, yellow, red);
示例4:
radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),
radial-gradient(30px circle, red, red 29px, transparent 30px);
- 重复渐变：repeating-linear-gradient() / repeating-radial-gradient()
最终示例：
<div id="homer" aria-label="Homer Simpson" role="img"></div>
<style>
html {
--bg: #fff;
background: var(--bg);
}
#homer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vmin;
height: 80vmin;
background-repeat: no-repeat;
background-image:
/* hair */
radial-gradient(ellipse 100% 95% at 58.75% 80%, #0000 45%, black 0 49.5%, #0000 0),
radial-gradient(ellipse 102% 95% at 66.75% 70%, #0000 45%, black 0 49.5%, #0000 0),
linear-gradient(82deg, #0000 40%, black 0 50%, #0000 0),
linear-gradient(42deg, #0000 30%, black 0 37%, #0000 0),
linear-gradient(90deg, #0000 40%, black 0 50%, #0000 0),
linear-gradient(52deg, #0000 62%, black 0 68%, #0000 0),
/* pupils */
radial-gradient(circle at 43.5% 45.5%, black 2%, #0000 0),
radial-gradient(circle at 64% 41.5%, black 1.75%, #0000 0),
/* eye 1 */
radial-gradient(ellipse 54% 51% at 44.5% 45%, white 17%, black 0 18.5%, #0000 0),
/* nose */
radial-gradient(ellipse 54% 51% at 0% 74.8%, white 51%, black 0 61%, #0000 0),
radial-gradient(circle at 150% 500%, white 88.75%, black 0 90.25%, #0000 0),
radial-gradient(circle at -85% -510%, #f000 89.88%, black 0 90.75%, #0000 0),
/* smile */
radial-gradient(circle at 110% 60%, #0000 50%, black 0 65%, #0000 0),
/* eye 2 */
radial-gradient(ellipse 50% 47% at 60.5% 42%, white 17%, black 0 18.5%, #0000 0),
/* neck */
radial-gradient(circle at -350% 120%, #0000 79.5%, #000 0 80.25%, #0000 0 92%, #0000 0),
radial-gradient(circle at 350% -90%, #0000 85%, #000 0 88%, #0000 0 92%, #0000 0),
/* mouth */
radial-gradient(circle at 40% -500%, #0000 90.5%, #000 0 92%, #0000 0 92%, #0000 0),
radial-gradient(circle at -30% 112%, #0000 59%, #000 0 62.5%, #0000 0),
radial-gradient(circle at -40% 20%, #0000 52%, #000 0 63%, #0000 0),
radial-gradient(circle at 0% 52%, white 35%, #000 0 45%, #0000 0),
/* chin */
linear-gradient(var(--bg), var(--bg)),
radial-gradient(ellipse 62% 57% at 53% 71%, #0000 24%, black 0 25.5%, #0000 0),
/* ear */
radial-gradient(ellipse 50% 55% at 75% 50%, #0000 75%, black 0 90%, #0000 0),
radial-gradient(circle at 50% 110%, #0000 50%, black 0 65%, #0000 0),
radial-gradient(circle at 110% 40%, #0000 50%, black 0 65%, #0000 0),
/* eyebrow */
radial-gradient(circle at -20% 84%, #0000 55%, black 0 65%, #0000 0),
/* cheek */
radial-gradient(circle at -10% 50%, #0000 55%, black 0 65%, #0000 0)
;
background-size:
/* hair */
18% 23%,
17% 20%,
8% 8%,
8% 8%,
8% 9%,
8% 8%,
/* pupils */
100% 100%,
100% 100%,
/* eye 1 */
100% 100%,
/* nose */
15% 15%,
10% 10%,
14.5% 15%,
/* smile */
3.5% 3.5%,
/* eye 2 */
100% 100%,
/* neck */
25% 18%,
10% 10%,
/* mouth */
34% 10%,
15% 12.5%,
5% 5%,
5% 12%,
/* chin */
40% 23%,
100% 100%,
/* ear */
10% 10%,
3.5% 3.5%,
3.5% 2.5%,
/* eyebrow */
5.5% 7%,
/* cheek */
5.5% 7%
;
background-position:
/* hair */
31% -1%,
23.5% 7%,
24% 56%,
26.9% 52.6%,
29.25% 52.25%,
30% 51.75%,
/* pupils */
0 0,
0 0,
/* eye 1 */
0 0,
/* nose */
72.75% 46%,
58% 47.25%,
58.88% 57%,
/* smile */
41.5% 72.5%,
/* eye 2 */
0 0,
/* neck */
43% 83%,
70% 89%,
/* mouth */
63% 73%,
76% 59%,
70% 75.5%,
78% 69%,
/* chin */
84% 69.5%,
0 0,
/* ear */
28% 65%,
31.5% 63.5%,
31.75% 64.5%,
/* eyebrow */
66% 30.75%,
/* cheek */
69.5% 51%
;
}
#homer::before {
content: "";
box-sizing: border-box;
border: 0.8vmin solid;
position: absolute;
top: 12%;
left: 21%;
width: 43%;
height: 42%;
border-radius: 100% / 90% 85% 95% 0%;
transform: rotate(-25deg);
background: transparent;
clip-path: polygon(0% 0%, 100% 0%, 100% 63%, 0% 96%);
box-shadow: inset -2vmin 1vmin 0 -1vmin white;
box-shadow: inset -2vmin 1vmin 0 -1vmin var(--bg);
}
</style>
