渐变背景
- 增加背景颜色的渐变色，
background-image
线性渐变
-
概念：沿着直线进行渐变
background-image: linear-gradient(方向，颜色1 位置1,颜色2 位置2,颜色3 位置3，....); -
特点：
- 默认从上到下均匀渐变
- 每个颜色值后面可以加上位置控制范围 ,色标:颜色 位置
- 第一个色标值不是从0开始,则表示
0~第一个色标值默认以第一个颜色纯色填充 - 最后一个色标值不是截止点,则表示
最后一个色标值~截止点默认以最后一个颜色纯色填充 - 相邻两个色标值一样,则出现颜色断层效果,渐变范围为0
-
渐变方向：
-
to 结束方向：
- to bottom
- to right
- to left
- to top
- to top right
- to top left
- to bottom right
- to bottom left
-
使用角度进行设置：
deg为单位结尾，0°表示水平向上，正值顺时针旋转，负值为逆时针方向
-
-
重复线性渐变:
background-image: repeating-linear-gradient(方向，颜色1 位置1,颜色2 位置2,颜色3 位置3，....);
透明属性设置
-
盒子透明
opacity：数字;- 数字范围为0-1；0表示完全透明，1表示不透明
- 盒子设置透明时，盒子内容所有内容都会有透明效果
-
颜色透明
rgba(0-255,0-255,0-255,0-1)- 数字范围为0-1；0表示完全透明，1表示不透明
- 只对当前颜色有透明效果，盒子其他内容不受影响
径向渐变（了解）
-
概念：沿着椭圆的半径方向进行渐变
background-image:radial-gradient() -
圆心：
- 默认中心点为圆心。
- 方位单词两两搭配,前面加上at
- x轴 y轴
-
形状：
- ellipse：表示椭圆形
- circle：表示圆形
-
大小：
farthest-corner:半径为圆心最远的角farthest-side:半径为圆心到最远的边closest-side:半径为圆心到最近的边closest-corner:半径为圆心到最近的角
