浅谈【CSS】渐变背景(background-image)以及基础用法

线性渐变

background-image: linear-gradient( 角度 , 颜色);
线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。
浅谈【CSS】渐变背景(background-image)以及基础用法_第1张图片
####background-image: linear-gradient( #E94E65, #1574A8);

这条直线的方向由角度指定,或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字,例如 to bottom left。
浅谈【CSS】渐变背景(background-image)以及基础用法_第2张图片

background-image: linear-gradient( to right, #E94E65, #1574A8);

这样渐变是从元素左边的红色过度到右边的蓝色
如果渐变是从元素上边的紫色过度到下边的绿色,要使用 to bottom 关键字。

background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF);

另外,还可以用 to bottom right 这样的关键字指定渐变的角度。使渐变从元素的左上角开始,到元素的右下角结束。
bac

background-image: linear-gradient(to bottom right, #7A88FF, #7AFFAF);

浅谈【CSS】渐变背景(background-image)以及基础用法_第3张图片

径向渐变

background-image: radial-gradient();

径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。
浅谈【CSS】渐变背景(background-image)以及基础用法_第4张图片

background-image: radial-gradient( #E94E65, #1574A8);

述代码会在元素的显示范围内创建一个椭圆形,把渐变的中心点(红色)放在元素的中心上。

我们还可以在颜色值前面加上 circle 关键字,创建圆形的渐变。
浅谈【CSS】渐变背景(background-image)以及基础用法_第5张图片

background-image: radial-gradient( circle, #E94E65, #1574A8);

设置径向渐变的中心点

可以用关键字 at 后面加上 background-position 属性支持的定位关键字和数值,指定渐变中心的位置,设置在元素的左上方(20% 20%)
浅谈【CSS】渐变背景(background-image)以及基础用法_第6张图片

background-image: radial-gradient( circle at 20% 20%, #E94E65, #1574A8);

closest-side:告诉浏览器从中心点向外扩展渐变,到离中心点最近的一边结束。

浅谈【CSS】渐变背景(background-image)以及基础用法_第7张图片

background-image: radial-gradient(closest-side at 20% 20%, #E94E65, #1574A8);

background-image还有很多玩法 剩下的我就不展示了,把方法写在这里。
arthest-corner:以离渐变中心点最远的顶角计算圆的半径
losest-corner:以离渐变中心点最近的元素顶角计算渐变的范围。
farthest-side:以离渐变中心点最远的那一边计算圆的半径。

你可能感兴趣的:(javascript,css3)