css3 渐变用法

最新推荐文章于 2023-01-12 17:25:57 发布

weixin_34337265

最新推荐文章于 2023-01-12 17:25:57 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/zhaoxiaoben/blog/164044

2019独角兽企业重金招聘Python工程师标准>>>

css3 的渐变gradient有连个部分，线性渐变和径向渐变。其中线性渐变比较简单，理解了线性渐变之后径向渐变也就好理解了。

linear-gradient

废话少说先上Demo

Demo 以chrome为主，其他浏览器换掉前缀就oK了

.test {
    backgroun-image: -webkit-linear-gradient(0deg, red 100px, blue 200px; yellow 300px);
    width: 400px;
    height: 400px;
}

<div class="test"></div>

好了，Demo结束，下面解释代码。先看一下标准定义的linear-gradient语法：

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

其中0deg 对应 [<point> || [angle]]。制定渐变的方向，0deg为从左到右，角度逆时针选装。可以用left、right、top、bottom等关键字来表示特定角度。如：
```
 - left = 0deg；
 - top = 270deg；
 - left top = 315deg；
```
red 100px,……对应 <stop> <stop>数量不限，stop内包含两个值： color、length。color表示填充颜色，length表示渐变的起/终点，至于是起点还是终点得看这个stop是与前面的stop结对计算还是与后面的stop结对计算。当第一个stop和第二个stop的length相同时渐变消失变为突变了，因为起点和终点重合没有渐变的空间了。

radial-gradient

还是先来看Demo

.test {
    background-image: -webkit-radial-gradient(center center, circle cover, red 100px, gray 200px);
width: 400px;
height: 400px
};

老规矩，解释代码：

radial-gradient([ <position>,]? [ [ <shape>  <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

position 对应 center：两个参数，可以是关键词、长度、百分比，第二个默认等于第一个，第一个默认为center
shape size 对应circle cover（中间空格隔开）： shape可选值有circle和ellipse； size表示圆形的半径可选值有：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover。解释一个剩下按字面意思理解即可，‘close-side’即半径等于‘position’到最近的‘border’的距离。contain相当于close-side，cover相当于farthest-side
color-stope 和线性渐变中的stope一样。

转载于:https://my.oschina.net/zhaoxiaoben/blog/164044