谈谈css中的渐变

·  阅读 424

css渐变让开发得以通过css代码来绘制简单渐变图形的能力,并且支持组合成更复杂的图形。本文介绍一下css渐变的定义、分类以及相应的语法,并在文末展示几个使用渐变的例子。

这是我参与更文挑战的第8天,活动详情查看: 更文挑战

什么是渐变

W3C是这么给渐变下定义的:渐变是一从一个颜色平滑过渡到另一个颜色的图片(A gradient is an image that smoothly fades from one color to another)。

因此渐变在css里是被视为图像的,任何可以用到图像的地方都可以使用渐变.

例如,渐变可作为背景图像:

/* 一个从上到下由黑色过渡到白色的渐变 */
gradient-as-bgimg{
    background:linear-gradient(#000,#fff);
}
复制代码

eg1.png

为什么需要渐变

前文已经提到渐变是一种图像,它通过几行css代码就可以实现一些丰富的图像效果。某种程度上可以替代外部图片的作用。

相对外部图片,它的优点有:

  • 通过代码实现,无需额外的带宽消耗
  • 更好维护,由于是代码实现UI效果,修改也比较方便
  • 由于是代码实现,无需担心图像的质量降损(模糊等问题)

再者,将一些图片换成渐变对页面的资源加载也是不错的减负。

渐变的分类

css里渐变分为两种:线性渐变径向渐变

线性渐变

线性渐变有三个重要的概念:

  • 渐变方向,下图用蓝色粗线表示。可以通过角度或者关键字设定
  • 渐变的端点(起点和终点)末端切线与渐变方向的交点,下图红色圆圈标记
  • 颜色位置点。端点内的任何位置。可以用像素表示位置点,也可以用百分比表示。两个位置点之间的部分会自动进行颜色插值,即颜色的过渡或渐变

线性渐变.png 线性渐变的语法为:

linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]
复制代码

第一部分指定渐变方向:

  • to left表示从左到右
  • to right表示从右到左
  • to right bottom表示从左上角到右下角(对角线)

第二部分指定了单色位置停留点,可以有多个颜色段。

对于某个颜色区段,只有两头颜色不相同长度不为0时才会发生渐变:

  • yellow 0%。不会发生渐变,只有一个颜色
  • yellow 0%,white 0%。不会发生渐变,长度为0
  • yellow 10% ,red 10% ,blue 80%。在10%到80%之间发生红色到蓝色的渐变。左边为纯黄色,右边为纯蓝色.

径向渐变

径向渐变也有几个重要概念:

  • 曲线类型,有圆形和椭圆形两种(circle,ellipse
  • 边缘曲线(ending shape)。
  • 虚拟渐变射线(virtual gradient ray)
  • 颜色位置点

它跟线性渐变不同的是,它的size不是预先设定了,它跟容纳渐变的盒子大小息息相关。

径向渐变.png

径向渐变的语法为:

radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>
)
<ending-shape> = ['circle'|'ellipse']
<size> = ['closest-side'|'farthest-side'|'closest-corner'|'farthest-corner'|<length>|<length-percentage>{2}]
/* 
<length>表示圆形的半径、<length-percentage>{2}表示椭圆形的水平、垂直半径
 */
复制代码

其中的size的四个关键字:

  • closest-side,使边缘形状刚好与离渐变中心最近的边相遇的尺寸
  • farthest-side,使边缘形状刚好与离渐变中心最远的边相遇的尺寸
  • closest-corner,使边缘形状刚好与离渐变中心最近的角相遇的尺寸
  • farthest-corner,使边缘形状刚好与离渐变中心最远的角相遇的尺寸

需要说明的是,相同的关键字在不同的渐变位置<position>也会产生不同的渐变效果(位置不同,跟边角的距离也就不同咯)。

对于圆形,我们只需要计算到一个边或角的距离即可,将该距离视为半径即可。

而对于椭圆形,则需要考虑两个值:水平半径和垂直半径,对于*-side比较好理解,水平和垂直距离就是椭圆的水平和垂直半径。对于*-corner,则会保持与*-side相同的纵横比: 比如设置了closest-corner,则在保持closest-side的前提下,使边缘形状刚好与离渐变中心最近的角相遇。

案例

这一节,展示几个应用css渐变的例子。

adidas多彩logo

<div class="gradient"></div>
<style>
.gradient{
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg,transparent 50%, white 50%),linear-gradient(135deg, white 50%,rgba(0, 0, 0, 0.774) 62%,white 62%,white 69%,rgba(255, 166, 0) 69%,rgba(182, 25, 51) 81%,#fff 81%,#fff 88%,rgb(89, 176, 247) 88%,rgb(170, 12, 190) 100%);
}
</style>
复制代码

image.png

地图轮廓

<div class="gradient"></div>
<style>
.gradient{
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at 100% 50%,rgba(51, 51, 51, 0.747),#eee 75%,#333 75%);
}
</style>
复制代码

image.png

棒棒糖(六彩圆形)

<div class="container">
    <div class="top">
        <div class="sugar"></div>
    </div>
    <div class="bottom">
        <div class="sugar"></div>
    </div>
</div>
<style>
.top{
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    overflow: hidden;
}
.top > .sugar{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: 
    linear-gradient(-1600deg,transparent 50%,blue 50%,blue 100%),
    linear-gradient(-120deg,transparent 50%,cyan 50%,cyan 100%),
    linear-gradient(-90deg,transparent 50%,green 50%,green 100%),
    linear-gradient(-60deg,transparent 50%,yellow 50%,yellow 100%),
    linear-gradient(-30deg,transparent 50%,orange 50%,orange 100%),
    linear-gradient(-180deg,red 0%,red 100%);
}
.bottom{
    width: 200px;
    height: 100px;
    overflow: hidden;
    transform: rotate(180deg);
}
.bottom > .sugar{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: 
    linear-gradient(-1600deg,transparent 50%,blue 50%,blue 100%),
    linear-gradient(-120deg,transparent 50%,cyan 50%,cyan 100%),
    linear-gradient(-90deg,transparent 50%,green 50%,green 100%),
    linear-gradient(-60deg,transparent 50%,yellow 50%,yellow 100%),
    linear-gradient(-30deg,transparent 50%,orange 50%,orange 100%),
    linear-gradient(-180deg,red 0%,red 100%);
}
</style>
复制代码

image.png

最后

由于作者才疏学浅,文中难免存在疏漏,如果对文中任何部分有疑惑,欢迎留言讨论或不吝赐教。

最后,感谢阅读。

分类:
前端
标签: