更新于

用渐变来模拟斑马纹

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

斑马纹应用很广泛,用于表格,代码展示,列表展示等等,一般都是先给每一行加一个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,一般也不会太大,影响比较小。

暂无评论

设置
配色方案

布局