CSS3 渐变

发表于: 2016-08-19分类于:CSS

CSS3 渐变

渐变用于创建用于创建两种或者多种颜色之间渐变的效果,渐变可以用于背景图片,图片边框等需要用到图片的地方。CSS3 中有两种类型的渐变,分别是线性渐变和径向渐变。

线性渐变

线性渐变的基本语法如下:

linear-gradient([<angle> | to <side-or-corner>]?, <color-stop>, <color-stop>)

举例如下:

button{
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  outline: 0;
  background-image: linear-gradient(to top, #999, #ccc);
}

以上代码会有从下至上的从 #999#ccc 的渐变。对于 to top 同样可以换成 0deg 。而 180deg 则和 to bottom 等价,你可以想象时钟的指针,0deg 就是指向正上方,而 180deg 是指向正下方,其他角度也就能想象出来了。

当然还可以指定线性渐变的范围,比如从 0%~30% 由红渐变至黄,30%~100% 由黄渐变至蓝,那么可以采用下面这样的下方的写法:

background-image: linear-gradient(90deg, red 0%, yellow 30%, blue 100%);

这里的百分数同样可以改写为具体的数值。

径向渐变

径向渐变的基本语法如下:

radial-gradient([<shape> || <size>] [at <position>]?,  <color-stop>, <color-stop>)

其中 shape 可以是 circleellipse,默认情况下为 ellipse

size 则用来规定径向渐变的半径,如果 shape 为 circle 则只能是一个值,如果是 ellipse 可以是两个值,用于确定横轴和纵轴, 这个值还可以选择使用一些预设值,这些值都是代表一个角或者一条边,size 则是渐变中心距离该位置的长度:

  • farthest-side : 渐变中心距离最远的边的距离作为渐变半径
  • farthest-corner:最远的顶点
  • closest-side:最近的边
  • closest-corner:最近的顶点

position 用来确定渐变的中心点,包含两个值(横轴和纵轴),取值可以是如 center, left, right, top, bottom 这样的关键字,也可以是 10px 这样的具体数值,还可以是 40% 这样的百分比。

举例如下:

background-image: radial-gradient(circle closest-side at 20% 30%, #fff 0%, #999 50%, #333 100%);

重复线性渐变

利用重复线性渐变,可以实现类似于作业本条纹的效果。代码如下:

.paper{
  width: 300px;
  height: 200px;
  border: 1px solid #999;
  background-color: #fff;
  background-image: repeating-linear-gradient(180deg, #fff 0, #fff 19px, #333 19px, #333 20px);
}

作业本纸张效果

重复径向渐变

利用重复径向渐变可以实现水波纹的效果:

.pipple{
  width: 300px;
  height: 200px;
  border: 1px solid #999;
  background-color: #fff;
  background-image: repeating-radial-gradient(circle,#fff 0, #fff 19px, #333 19px, #333 20px);
}

波纹效果

多个渐变叠加

是否可以在一个背景图上应用多个渐变呢?是可以的,例如下面的例子,利用渐变做出来了个玩意儿(它不是五环)。

image

代码:

div{
  width: 250px;
  height: 120px;
  border: 1px solid #999;
  background-color: #fff;
  background-image: radial-gradient(circle 30px at center,transparent 0%, transparent 80%, #0085c7 81%, #0085c7 99%, transparent 100%),
    radial-gradient(circle 30px at center,transparent 0%, transparent 80%, #000 81%, #000 99%, transparent 100%),
    radial-gradient(circle 30px at center,transparent 0%, transparent 80%, #df0024 81%, #df0024 99%, transparent 100%),
    radial-gradient(circle 30px at center,transparent 0%, transparent 80%, #f4c300 81%, #f4c300 99%, transparent 100%),
    radial-gradient(circle 30px at center,transparent 0%, transparent 80%, #009f3d 81%, #009f3d 99%, transparent 100%);
  background-position: 31px 14px, 95px 14px, 159px 14px, 63px 46px, 127px 46px;
  background-size: 60px 60px;
  background-repeat: no-repeat;
}

基本的思路是限定背景区域的大小为边长为 60px 的正方形,然后在这个正方形上绘制圆圈,这样实际上等同于给元素应用了多幅背景图片,且多幅背景图目前是叠加在一起的。需要使用 background-position 来重新安排背景图片的位置,使他们彼此错开。为了让五个圈的组合整体位于中心,给 background-position 的 x 和 y 都添加了一个偏移量 31px 和 14px