一、linear-gradient:背景颜色线性渐变。 linear-gradient(方位, 起始色, 末尾色)
方位:可选参数,渐变的方位。可以使用的值有:to top、to top right、to right、to bottom、to bottom left、to left、to top left。
起始色 必选参数,颜色值
末尾色 必选参数,颜色值
通过:top、left、right、bottom这四组实现的渐变方向有时比较单一,我们可以使用以角度单位的数值来设置方位。比如 0 度(0deg)相当于 to top;角度会沿逆时针方向随着你的角度的增加而增加(可以是负值)。
如: background-image: linear-gradient(45deg,orange,green);
多色线性渐变:background-image: linear-gradient(-45deg,orange,green,blue,red);
通过百分比(也可以用像素等单位)设置多色线性位置:
ackground-image: linear-gradient(-45deg, orange 0%, green 20%, blue 40%, red 100%);
结合背景,并使用透明渐变实现强大层次感:
background-color:red;
background-image: linear-gradient(to top right, rgba(0,0,0,0.6), rgba(0,0,0,0));
重复渐变属性值:background-image:repeating-linear-gradient(to top, orange 10px, green 30px);
二、radial-gradient:径向渐变,也叫做放射性渐变:从一个点向四周发散的方式扩展
radial-gradient(形状 发散方向 发散距离,起始色 起始色大小,末尾色 起始色大小);
其中起始色和末尾色为必须属性,其他为可选属性。
方位:可选参数,径向的方位。可以使用的值有:像素、百分比、固定值,或复合搭配使用
形状:circle:圆形; ellipse:椭圆形,默认值
发散方向: top 从顶部发散 left 从左侧发散 right 从右侧发散
bottom 从底部发散 center 从中间发散
发散距离:可以用像素表示半径,但不接受百分比,也可以使用下面提供的关键词。
closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角
同样,也有重复背景方式:background-image:repeating-radial-gradient(circle 50px, orange, green);
- 本文固定链接: https://www.qingheluo.com/csszhongbeijingyansejianbian/
- 转载请注明: qingheluo 于 清河洛 发表