使用 CSS 制作圆锥形渐变背景效果可以使用 CSS3 中的 background-image
属性和 conic-gradient()
函数。具体步骤如下:
background-image
属性为 conic-gradient()
函数,例如:div {
width: 200px;
height: 200px;
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
conic-gradient()
函数中设置颜色值和角度值,颜色值可以使用关键词、十六进制、RGB、RGBA 等方式表示,角度值可以使用度数或百分比表示,例如:div {
width: 200px;
height: 200px;
background-image: conic-gradient(
from -90deg,
red,
yellow,
lime,
aqua,
blue,
magenta,
to 270deg
);
}
其中,from
表示起始角度,可以使用 -180deg
到 180deg
的度数或 -100%
到 100%
的百分比表示,to
表示结束角度,可以使用 0deg
到 360deg
的度数或 0%
到 100%
的百分比表示。
background-repeat
属性设置背景图像的平铺方式,例如:div {
width: 200px;
height: 200px;
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
background-repeat: no-repeat;
}
background-position
属性设置背景图像的位置,例如:div {
width: 200px;
height: 200px;
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
background-repeat: no-repeat;
background-position: center center;
}
这样就可以制作出圆锥形渐变背景效果了。关键词包括:background-image、conic-gradient()、from、to、background-repeat、background-position。