0%

用渐变来模拟斑马纹

发布于 / 分类: CSS / 暂无评论 / 阅读量 1022

最后更新于 2018年05月12日

斑马纹应用很广泛,用于表格,代码展示,列表展示等等,一般都是先给每一行加一个block的父元素,然后再用元素选择器:nth-child(odd)和:nth-child(even)来选择奇数元素和偶数元素,这样就会产生一个问题,第一行一般都是标题之类的,这样写会让标题和内容部分相同,于是又只能再加一个选择器:first-child将第一个重置。这样虽然说是可以,但是岂不是很麻烦,需要给每一个子元素加一个block,如果子元素本身就是block那好办,如果不是呢,只是纯文本呢,那不是还要用js去选择,得不偿失,于是我们可以试着用背景层去模拟,然后用em或者rem单位控制大小,这样,既可以自适应,也可以和文字对齐。话不多说,我们开始:

首先建立一个父元素,给父元素加上条纹:

html

<div>
  a
  b
  c
  d
  e
</div>

css

div {
  width:500px;
  height:500px;
  color:white;
  font-size:1em;
  line-height:1.5;
  font-family:Hack;
  white-space: pre-wrap;
  background: #666 linear-gradient(rgba(0,0,0,.2) 50%,transparent 0) 0/100% 3em;
}

效果图:

-50

由于background-position默认0等于50% 50%,从中间开始向四周扩散,所以顶部和底部他有一部分的条纹是不全的,这样就会导致和文字不对齐,于是我们只要改成从边缘开始就行了,left bottom或者0% 0%,100% 100%,只要是从边缘开始就行,于是改成这样:

background: #666 linear-gradient(rgba(0,0,0,.2) 50%,transparent 0) 0% 0%/100% 3em;

效果图:

-50

效果完美,但是首行会有空白,因为white-space: pre-wrap;是保留空白符和换行符,为此,你可以这样写:

<div>    a
    b
    c
    d
    e
</div>

效果图:

-50

原理:用渐变条纹来模拟斑马纹,由于字体大小是1em,行高1.5倍,渐变代码上写的是两条条纹的高度,所以就是(1em × 1.5)+(1em × 1.5)=3em,如果以后行高发生变化,渐变背景的3em也要发生变化,由于渐变背景使用的是rgba,所以如果想要改变底色,只需要更改背景色即可,如果还不清楚,可以先去看看本人之前发布的,关于条纹渐变的文章。

知道了原理,以上的写法也不是唯一的,我们可以试着深入下,比如我们想要增加一个padding宽度,会怎么样呢!

css

div {
  width:500px;
  height:500px;
  padding:.5em;
  color:white;
  font-size:1em;
  line-height:1.5;
  font-family:Hack;
  white-space: pre-wrap;
  background: #666 linear-gradient(rgba(0,0,0,.2) 50%,transparent 0) 0% 0%/100% 3em;
}

效果图:

-50

文字会以内padding的原因往下位移的.5em的大小,背景层还是无动于衷,这里我们要知道渐变背景他的渐变开始位置,官方文写着是从padding-box盒子开始产生渐变,所以这里我们加了padding,背景还是无动于衷,因为他本来就是从这里开始的,这样就好办了,我们只要将background-position加上.5em,不就好了。

行是行,但是这样以来,我们的维护成本就提高了,以后每次改变padding的大小,background-position也要跟着改,太麻烦了,我们本着更加方面简洁的想法,可以试着从源头出发,什么是源头,就是背景层为什么不动,因为他开始就是这里,那么,我们只要改变他的开始位置就是,好在css为我们提供了改变位置的代码,background-origin。

于是加上以下代码:

background-origin: content-box;

或者在简写上添加:

background: #666 linear-gradient(rgba(0,0,0,.2) 50%,transparent 0) 0% 0%/100% 3em content-box;

效果图:

-50

效果还不错,达到我们的需要,就是底部和底部有些不好看,不过这也没办法了,这已是最佳显示效果了。

为此我们还可以试试repeating-linear-gradient,这样就可以省去写position和size了,只需要加上以下两串代码:

background: #666 repeating-linear-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.2) 1.5em,transparent 0,transparent 3em);
background-origin: content-box;

效果图:

-50

相对于上一个的写法,这样写,顶部和底部会和相近的颜色统一,从大局上看,这样写美观一些,从精准的角度看,顶部和底部他的显示效果其实是错的,不过这也是看个人的爱好的,我个人比较偏向这种,毕竟即便增加padding,一般也不会太大,影响比较小。

有趣的hue-rotate滤镜 控制tab的宽度tab-size
  • 滑动验证
    »
  • 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