正在加载中

最后更新于 2018年04月21日

渐变条纹linear-gradient一些感悟:

条纹背景其实用的还是比较少的,主要是因为色彩的调控,有点喧宾夺主,如果是只是简单的页面,非多内容的,其实也可以考虑用色彩比较淡一些的条纹做为背景,然后内容部分用颜色块去凸显主体,不过个人是没有这个调控能力,等以后有机会再试试吧!

先我们来讲讲linear-gradient的代码意思:

background: linear-gradient(#58a 50%,#999 70%);

这是一段常见的背景渐变,淡蓝色在上面,灰色在下面。如图:
-25
这里的50%和70%就需要特别说明一下,这个百分百并不是指颜色占据的高度或者宽度,而是颜色渐变的起始点、结束点,从50%开始渐变,到70%结束渐变!
-25
既然知道了这是起止点,那么我们再回顾一下渐变的一个定义:

当某个色标的位置值小于前面时,默认使用前面所有位置值最大的值!

也就说如果我们第一个值是50%,第二个值49%,这样系统会自动判断这个49%为50%,因为你渐变不可能还可以往回渐变的,这完全就是逻辑上的错误,这样其实也有一个好处,我们可以通过这个特性去创建条纹背景,你试想一下,当你的渐变的距离等于0的时候,你所得到的就是纯色的背景了。

注意:背景色他的叠加方式是,第一写的浮动在最上面,第二写的浮动下第一个下面,所以,如果你第二个颜色值的宽度小于第一个,第二个颜色是完全看不到的,被遮挡的。

于是乎:

background: linear-gradient(#58a 50%,#999 0);

-25
效果很符合我们的想象,那么我们再多加几个颜色,来创建条纹。

background:linear-gradient(#58a 25%,#999 0,#999 50%,blue 0,blue 75%,red 0);

-25
简单的条纹创建成功,但是我们这样只是设置的一整块的百分比,如果我们要让他每条宽度都是15px,而且只有这四个颜色,怎么弄,我们不可能知道一个网页他的高度,而且也不可能一条一条去写吧,这是不可能做到的,于是乎我们应该要想到backgroun-size,用size去控制渐变的高度,于是乎:

background:linear-gradient(#58a 25%,#999 0,#999 50%,blue 0,blue 75%,red 0);
background-size: 100% 60px;

-25

x轴我们让他宽度100%填满,y轴我们是只设置4个颜色,每个颜色15px,就是4*15=60px,加上背景默认是repeat的,一个条纹渐变完美制作完毕,你也可以自己调整不同的颜色宽度来达到自己喜欢的效果。

那么,简单的条纹我们已经制作完毕,我们下面来进阶:

如果我想让条纹倾斜,怎么办?
这时肯定有人会说,当然是在渐变里面添加角度就可以了啊,很简单的!
那么我们就按他所说的这么设置:

background:linear-gradient(45deg,#58a 25%,#999 0,#999 50%,blue 0,blue 75%,red 0);
background-size: 100% 60px;

-25
你会发现你得到的完全是一个撕裂的图片,并不是我们想要的倾斜45度的条纹,完全是错误的。

这里我们要先知道几个条件:

  1. 渐变里面的角度(deg)方向,他的颜色并不是从上到下了,而是从下到上,也就是第一个我们设置的是红色,那么设置了deg角度后,红色会出现在相反的方向,这点需要注意。
  2. linear-gradient最多支持两条渐变条纹倾斜,且倾斜角度只能是45deg、45+45+45...想要增加角度只能是加减45。
  3. 虽然说最大只支持两条,但是写的时候,你需要重复写一次,也就是一共是四条,只是重复了而已。
  4. backgroud-size必须是正方形,如30px 30px。

代码:

background:linear-gradient(45deg,#58a 25%,#666 0,#666 50%,#58a 0,#58a 75%,#666 0,#666 100%);
background-size: 30px 30px;

45deg:
-25
90deg:
-25
135deg:
-25

基本上就如上,还有一些角度就不一一展示了,自行测试即可。
上面的图你可以看到第一个颜色#58a一直是处于最底部的,所以,你要是想让他显示在顶部,就是要设置不同的角度,比如45deg就要改成135deg才对。

那么倾斜条纹我是是已经会了,但是有局限啊,只能45deg,不符合我们css进阶的需求,于是,下面我们介绍一些css3的渐变代码:repeating-linear-gradient

这个repeating-linear-gradient有什么特别的地方呢?

  1. 可以创建任意角度的条纹。
  2. 不需要设置background-size也能控制条纹宽度。
  3. 想设置几个颜色就设置几个颜色。

具体代码如下:

background:repeating-linear-gradient(45deg,#58a 0,#58a 5px,#666 0,#666 10px,blue 0,blue 15px,red 0,red 20px);

-25

十分简单,唯一需要注意的就是,从第一条颜色开始,他的渐变开始点就是要是0。

其次这个要注意就是ie11才支持,旧的ie版本是不支持的,opera mini不支持,现代浏览器都已经支持了,所以,为了兼容性,你还需要在前面加上一个兼容背景色:

background-color: #eee;
background:repeating-linear-gradient(45deg,#58a 0,#58a 5px,#666 0,#666 10px,blue 0,blue 15px,red 0,red 20px);

好了,讲了这么多我们来弄个实际例子,我们用条纹来模拟信封的边框吧!
-25
这张是我百度找的一张信封的图片,我们用css来模拟下这个效果!

我先是完全按照这个信封风格做:

.div1 {
    width: 800px;
    height: 400px;
    border: 10px solid transparent;
    background-color: #eee;
    background:linear-gradient(white,white) padding-box,
    repeating-linear-gradient(45deg,transparent 0,transparent 10px,#9c070d 0,#9c070d 20px,transparent 0,transparent 30px,#0032dd 0,#0032dd 40px) border-box;
}

效果图:
-50

发现效果不好,因为边角都透明了,实物是有底色的,所有他透明是没问题,而我们单纯照搬会出问题,所以我们把颜色的位置调整下!

repeating-linear-gradient(45deg,#9c070d 0,#9c070d 10px,transparent 0,transparent 20px,#0032dd 0,#0032dd 30px,transparent 0,transparent 40px) border-box;

效果图:
-50

这样看,还不错!

本期感悟到此结束,有兴趣也可以留言你自己的想法,哈哈...

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao

登录