html 用css画出斑马线,使用CSS3实现一个斑马线的效果

不得不说CSS是绚烂的，实现一个斑马线效果的方式多种多样。

我整理了4种实现斑马线效果的方式，以供学习记录。下面一一介绍。

1.使用box-shadow属性。这恐怕是最low的一种实现了。

效果：

代码：

.test1 {

position: fixed;

top: 0px;

bottom: 15px;

right: 15px;

width: 20px;

height: 200px;

box-shadow: #67C23A -40px 0 0, #67C23A -80px 0, #67C23A -120px 0, #67C23A -160px 0, #67C23A -160px 0;

z-index: 3;

background: #67C23A;

}

原理：这种实现方式是通过为元素设置多个与元素 背景色一致的阴影来实现斑马线效果的。 box-shadow属性可以使用“，”分隔每组参数值，从而设置多个阴影效果,这里就是利用box-shadow的这种特性。

2.为background属性设置repeat-linear-gradient渐变值实现背景色的重复渐变。

效果