【css3笔记】---- 渐变的秘密
《CSS揭秘》这本书非常不错，充满了干货和惊喜。以下主要是关于使用渐变做出来的一些效果的笔记。请用最新的现代浏览器观看。 首先要回顾下一个css语句： linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 这是一个线性渐变，第一参数是渐变方向，是可选的。可以是角度，angle的值是度数，比如45deg，90deg。也可以使用to side-or-corner .比如 to left（从右到左） ,to bottom(从上到下)；第二个和第三个参数都是渐变颜色。所以最简单的写法可以有： background: linear-gradient(aquamarine,orange) 默认是从上往下渐变。但如果我们不想要渐变，就要颜色条。诀窍就是两种颜色之间不要留空隙，因为留了空隙就会出现渐变的过渡效果。所以我们可以设置各占50%。这个50%代表颜色位置。也可以是长度单位。 background: linear-gradient(aquamarine 50%,orange 50%) 如果我们需要多种颜色呢，比如一个蓝白红。 background: linear-gradient(90deg,aqua 0 ,aqua 33%,white 0 ,white 67%