前端笔记 06:渐变

文章目录

目的

对于用户界面开发来说渐变是一种非常常用的功能。CSS中的渐变是一种由一定规则生成的图像(image数据类型),主要分为线性渐变和径向渐变,另外还有个新出的圆锥渐变。

linear-gradient(线性渐变)

线性渐变就是指两种或以上颜色沿着某条直线铺展开来,看下面演示:
前端笔记 06:渐变
线性渐变可以通过填入的第一个参数来改变角度,可以填入角度、朝向、转动度等:
前端笔记 06:渐变
默认情况下,从一个颜色的终止点平滑的过渡到另一个颜色的终止点,颜色之间的中点是两个颜色颜色转换的中点,你可以将中点移动到这两个颜色之间的任意位置:
前端笔记 06:渐变
更进一步的你还可以将某种颜色的中心位置放到某个位置:
前端笔记 06:渐变
除了选择颜色的中心位置,你还可以选择颜色非渐变部分的起始与结束位置:
前端笔记 06:渐变
上面演示中两种颜色间缺省的区域将用过度色填充,如果没有缺省的区域则会出现硬边,也可以利用这个特性来做一些比较有意思的东西:
前端笔记 06:渐变
CSS的渐变可以组合起来使用,比如下面这样:
前端笔记 06:渐变
前端笔记 06:渐变
除了基础的 linear-gradient() 外还有 repeating-linear-gradient() 函数可以用于创建重复呈现的过渡效果:
前端笔记 06:渐变
前端笔记 06:渐变
前端笔记 06:渐变

radial-gradient(径向渐变)

径向渐变就是指两种或以上颜色沿着圆心由内而外铺展开来,看下面演示:
前端笔记 06:渐变
和线性渐变一样径向渐变可以设置颜色过度中间点:
前端笔记 06:渐变
和线性渐变一样径向渐变可以设置颜色非渐变部分的起始与结束位置:
前端笔记 06:渐变
和线性渐变一样径向渐变填入的第一个参数可以实现一些特定功能,在径向渐变中这个参数主要可以改变圆心的位置、形状、边缘轮廓的具体位置。
圆心位置可以用尺寸、百分比、方位等来描述;形状可以选圆形(circle)或椭圆形(ellipse);边缘轮廓的具体位置可选值如下:

取值 说明
closest-side 渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)
closest-corner 渐变的边缘形状与容器距离渐变中心点最近的一个角相交
farthest-side 与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)
farthest-corner 渐变的边缘形状与容器距离渐变中心点最远的一个角相交

前端笔记 06:渐变
前端笔记 06:渐变
前端笔记 06:渐变
和和线性渐变一样径向渐变也可以组合起来使用:
前端笔记 06:渐变
前端笔记 06:渐变
可以使用 repeating-radial-gradient() 函数创建重复呈现的过渡效果:
前端笔记 06:渐变

conic-gradient(锥形渐变)

锥形渐变和径向渐变某些方便非常相似,区别在于径向渐变依照圆心由内而外过度,而锥形渐变则以圆心和圆周间的扇形区域为过度,看下面演示:
前端笔记 06:渐变
锥形渐变也可以通过第一个参数设置起始角度和圆心:
前端笔记 06:渐变
锥形渐变用在实现色环、饼图、某些loading动画中会比较方便:
前端笔记 06:渐变
前端笔记 06:渐变

总结

渐变的基础内容主要就是这些了,更多的内容可以参考下面链接:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient()
https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient()
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

上一篇:数据科学导论——数学基础之优化


下一篇:深度学习入门实战笔记(1)——线性回归实战