浅析CSS中怎么实现线性渐变（linear-gradient）

CSS中怎么实现线性渐变？下面本篇 文章 给大家介绍一下CSS线性渐变函数linear-gra die nt()的使用方法，并聊聊线性渐变的多种应用， 希望对大家有所帮助 ！

linear-gradient

1. 语法

linear-gradient([[to <direction>|<angle>],]? <color stop?>, <color stop?>[, .. .]?)

- webkit -linear-gradient([[<direction>|<angle>],]? <color stop?>, <color stop?>[, ...]?)

这2种在使用方式和表现形式上都有所不同，使用 direction 时，前者要带 to , 后者不带；使用 angle 时，表现不一致。【推荐学习：css视频教程】

1）默认

二者默认都是从上到下

background -i mage:linear-gradient( # 00ffff, #f F1 493, #006699);
background-image:-webk IT -linear-gradient(#00ffff, #ff1493, #006699)

2） <direction>: [left|right]|[top|bottom] 的使用

二者表现 方向 相反

background-image:linear-gradient(to left, #00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(left, #00ffff, #ff1493, #006699);

background-image:linear-gradient(to left top, #00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(left top, #00ffff, #ff1493, #006699);

3） <angle> 的使用

度数 与 方向 的对应关系。 -webkit- 与之对应的方向则为 450°-angle

background-image:linear-gradient(275 deg , #ff1493, #000000, #006699);
background-image:-webkit-linear-gradient(175deg, #ff1493, #000000, #006699);

450°-175°=275° ，所以二者表现一致，如下图：

4） <color stop> = <color [ PE rcentage|length]> 的使用

stop 可使用百分比，也可以使用具体值，表示这种颜色在此位置达到 饱和

background-image:linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);
background-image:-webkit-linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);

从上图可以看出颜色变化过程：

0% --> 10%: #ff1493 一直处于 饱和

10% --> 40%: #ff1493 渐变为 #000000 , 在 40% 处， #000000 达到 饱和

40% --> 60%: #000000 渐变为 #006699 , 在 60% 处， #006699 达到 饱和

60% --> 100%: #006699 一直处于 饱和

利用 这一特性，可以 绘制 出 条纹

  background-image:linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);
  background-image:-webkit-linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);

注： stop 还可以同时设置2个值， 如 linear-gradient(to right, #ff1493 0% 33%, #000000 33% 66%, #006699 66% 100%);-webkit-linear-gradient(to right, #ff1493 33%, #000000 33% 66%, #006699 66% 100%); ，效果与上图一致。

若后者的值小于前者，以前者为准，如下 20px 小于 60px ，实际按 60px 显示，效果如下图：

background-image:linear-gradient(right, #ff1493 60px, #000000 20px);
background-image:-webkit-linear-gradient(right, #ff1493 60px, #000000 20px);

扩展1：渐变中心

默认是2种颜色的中心，但是我们可以设置其渐变中心

/* 3种颜色平分，渐变中心为1/3和2/3处 */
background-image:linear-gradient(to right, #ff1493, #000000, #006699); 
/* 渐变中心在10%和20%处 */
background-image:linear-gradient(to right, #ff1493, 10%, #000000, 20%, #006699);

注： -webkit-linear-gradient 不支持此用法

扩展2: repeating-linear-gradient

我们可以使用属性这个绘制重复的色块

background-image:repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px);
background-image:-webkit-repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px)

2、常用样式

（1）多色 星空

background-image:
    linear-gradient(45deg, rgba(255, 0, 76, 0.7), rgba(0, 0, 255, 0) 80%),
    linear-gradient(135deg, rgba(106, 0, 128, 1), rgba(0, 128, 0, 0) 80%),
    linear-gradient(225deg, rgba(0, 255, 255, 1), rgba(0, 255, 255, 0) 80%),
    linear-gradient(315deg, rgba(255, 192, 203, 0.7), rgba(255, 192, 203, 0) 80%);

同时设置多个值，让整个背景色看起来比较绚丽

（2）格子图案

background-image:
    repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px),
    repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px);
    
background-image:
    repeating-linear-gradient(45deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px),
    repeating-linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px);

利用颜色与透明色交替渲染

（3）边框渐变

<div id="wrap"></div>
<style>
 #wrap {
    width: 180px;
    h ei ght: 40px;
    border: 5px solid transparent;
    border-image: linear-gradient(45deg, aqua, pink, purple) 1;
}

</style>

内部 背景透明 ，但是 不支持设置border-radius

<div id="wrap"></div>
<style>
 #wrap {
    width: 180px;
    height: 40px;
    border: 5px solid transparent;
    border-image: linear-gradient(45deg, aqua, pink, purple) 1;
    clip-path: inset(0 round 5px);
}

</style>

注：可以使用 clip-path 裁剪出 圆 角, 但是这种方式不适用于角度 较大 的圆角

<div id="wrap">
    <div id="content"></div>
</div>
<style>
#wrap {
    width: 180px;
    height: 40px;
    border-radius: 20px;
    background: #FFF;
    position: relative;
}

#wrap :: before {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    background-image: linear-gradient(45deg, aqua, pink, purple);
    border-radius: 25px;
    z-index: -1
}

/* 或者 */

#wrap {
    width: 180px;
    height: 40px;
    border-radius: 20px;
    background: #FFF;
    position: relative;
    border: 5px solid transparent;
    background-ori gin : border-box;
    background-image: linear-gradient(#FFF, #FFF), linear-gradient(45deg, aqua, pink, purple);
    background-clip: padding-box, border-box;
}

/*或者*/

#wrap {
    width: 180px;
    height: 50px;
    border: 5px solid transparent;
    border-radius: 25px;
    background-image: linear-gradient(45deg, aqua, pink, purple);
    background-origin: border-box;
}

#content {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #FFF;
}

</style>

这 几种 方式都能 做到 圆角 渐变边框 ，但是无法做到内部背景透明

（4）文字渐变

<div id="wrap"> Darker CMJ</div>
<style>
#wrap {
    font- Size:  40px;
    line-height: 40px;
     font-weight : bold;
    background-clip: text;
    -webkit-background-clip: text;
    // color: transparent;
    -webkit -t ext-fill-color: transparent;
    background-image: linear-gradient(45deg, aqua, pink, purple);
}
</style>

background-clip 规定背景的绘制区域，我们设置其值为 text ，就是在文字区域绘制，然后将文字 color 或者 -webkit-text-fill-color 设置为透明色，渐变区域就能显示出来了

好了，over，第一次写文章，希望能坚持下去=.=

（学习视频分享：web前端）

以上就是浅析CSS中怎么实现线性渐变（linear-gradient）的详细内容，更多请关注其它相关文章！

总结

以上是 为你收集整理的 浅析CSS中怎么实现线性渐变（linear-gradient） 全部内容，希望文章能够帮你解决 浅析CSS中怎么实现线性渐变（linear-gradient） 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于浅析CSS中怎么实现线性渐变（linear-gradient）的详细内容...