码迷,mamicode.com
首页 > Web开发 > 详细

五十四:CSS3之背景与渐变之渐变

时间:2021-01-18 10:43:07      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:改变   声明   loading   size   star   linear   die   节点   lips   

 

渐变可以在两个或多个指定的颜色之间显示平稳的过渡

 

一:线性渐变:是沿着一根轴线改变颜色,从起点到终点颜色进行属性渐变(从一边拉向另一边)

background: linear-gradient(direction, color-stop1, color-stop2, ...)

1.线性渐变-从上到下(默认)

技术图片

技术图片

2.从左到右,需要声明开始的方向和结束的方向

技术图片

技术图片

3.对角线

技术图片

技术图片

4.使用角度,规定渐变的方向

技术图片

技术图片

5.重复渐变

技术图片

技术图片

 

二:径向渐变,从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)

background: radial-gradient(center, shhape, size, start-color, ..., last-color);

1.颜色节点均匀分布(默认)

技术图片

技术图片

2.颜色节点不均匀分布

技术图片

技术图片

3.设置形状:

  circle:圆形

  ellipse:椭圆(默认)

技术图片

技术图片

4.尺寸大小:

  closest-side:最近边

  farthest-side:最远边

  closest-corner:最近角

  farthest-corner:最远角

技术图片

技术图片

5.重复渐变

技术图片

技术图片

 

案例:

技术图片

技术图片

 

五十四:CSS3之背景与渐变之渐变

标签:改变   声明   loading   size   star   linear   die   节点   lips   

原文地址:https://www.cnblogs.com/zhongyehai/p/14130323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!