孙肖宁

CSS3中的渐变
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很...
扫描右侧二维码阅读全文
04
2018/06

CSS3中的渐变

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

线性渐变 (gradient 变化)

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

background:linear-gradient(
To right 表示方向 (left,top,right,left ,也可以使用度数`30deg`)
        Yellow,  渐变起始颜色
        Green   渐变终止颜色
)

注意:必要的元素:

  • 方向
  • 起始颜色
  • 终止色;

径向渐变 (radial 径向)

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

//围绕中心点做渐变,半径是150px,从黄颜色到绿颜色做渐变.
 background: radial-gradient(
          150px  at  center,
          yellow,
          green
     );  

注意:
1、必要的元素:

  • 辐射范围即圆半径 (半径越大,渐变效果越大)
  • 中心点 即圆的中心 (中心点的位置是以盒子自身)
  • 渐变起始色
  • 渐变终止色

2、关于中心点:中心位置参照的是盒子的左上角
3、关于辐射范围:其半径可以不等,即可以是椭圆

Last modification:June 5th, 2018 at 08:32 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment