外观
渐变
约 316 字大约 1 分钟
2024-10-02
渐变是多个颜色逐渐变化的效果, 一般用于设置盒子背景.
线性渐变
background-image: linear-gradient(渐变方向, 颜色1 终点位置, 颜色2 终点位置, ...);
- 渐变方向: 可选.
- to 方位代名词.
- 角度度数.
- 终点位置: 可选.
- 百分比.
例子:
HTML
<div></div>CSS
div {
width: 200px;
height: 200px;
background-image: linear-gradient(red, green);
}径向渐变
background-image: radial-gradient(半径 at 圆心位置, 颜色1 终点位置, 颜色2 终点位置, ...);
半径可以是2条, 则为椭圆.
圆心位置取值: 数值, 百分比, 方位名词.
例子:
HTML
<div></div>CSS
div {
width: 200px;
height: 200px;
background-image: radial-gradient(red, green)
}老规矩
一样推荐几个网站, 这两个网站都很推荐.
然后顺便放一个中国风的纯色色卡网站.
拓展
为什么你拉的渐变感觉脏脏的, 例如上面的例子, 有灰色.
省流: 拉渐变时有灰色死区, 只需要绕过就可以了.
版权所有
版权归属：洱海