分解线性背景渐变语法

发布日期:2015-09-03 22:12:18
线性背景渐变语法可能有点复杂,所以我们对其做一个分解:
  圆括号中的第一个值(即例子中的 90deg ,可选)定义了渐变的方向。不定义该值则
默认是一个垂直从顶部到底部的渐变。你还可以使用如 to top right 这样的值,这
会产生一个朝向右上角的对角线渐变。
  下一个值(例子中的 #ffffff 0% )定义的是渐变的“起点” ,包括起点的颜色和位置。
你也可以使用像 blue 20% 这样的值,这样就是从蓝色开始渐变到下一个颜色,而渐
变开始位置则位于假想的渐变路径的 20%处。同样,起点位置也可以使用负值,这样
渐变从实际可见区域之外就开始了。比如:
background: linear-gradient(90deg, #ffffff -50%, #e4e4e4 50%, #ffffff 100%);
上面这行代码意味着渐变从可见区域之外开始,假想的渐变路径比可见区域长 50%。
  下一个值指的是“过渡颜色点” 。我们来回顾一下:沿着 90 度垂直方向,从白色开始
(( #ffffff 0% ) ,向位于渐变路径 50%处的 #e4e4e4 这个颜色(浅灰色)渐变。这里
就是渐变中的第一个过渡颜色点。如果需要的话,可以在渐变“终点”之前定义更多
的过渡颜色点(使用逗号分隔) 。
  圆括号中的最后一个值始终是渐变的“终点” 。不论在起点之后放置了多少个过渡颜色
点,最后一个值始终是终点。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计