您的位置：首页 > Web前端 > CSS

纯css3实现斑马线repeating-linear-gradient和linear-gradient的妙用

2016-03-14 03:34 771 查看

今天睡得太早，结果晚上12:45的时候就醒过来了。现在想起小时候，实在是羡慕，那时候9点钟睡了，到早上上学的时候还是迷迷糊糊的要睡觉的感觉，现在特羡慕那时候那么能睡。今天是周一了，两天的休息日已经过去了，想想挺浪费的，这两天就纯呆家里玩LOL，上周周五下班的时候还给自己定了很多目标结果就执行了一个，而且效果差池人意。实在是睡不着，趁这个时间，把上周六晚上学到的一个css3背景效果记录下，方便下次查询这个知识点，我查询了很多博客和文档，部分文字直接复制w3cplus的注意红色部分的疑问点下面我们要实现这样的一个效果:

先讲一下css3多个背景：代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.d1{
background-image:url(1.jpg), url(2.jpg);
background-size: 50px 50px;
background-position: 0 0,30px 0;
background-repeat: no-repeat;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div class="d1"></div>
</body>
</html>

效果：第二个背景被第一个背景给遮住了，第一个背景比第二个背景的z-index高，我不大清楚我这里要表达什么，但知道这个情况就可以了

现在我们尝试使用纯

linear-gradient

和

background-size

实现相同的条纹效果。我们将一个方形的背景加上带有角度

.25em

宽度黑色条纹和

.5em

宽度的蓝色条纹。一个正方形的对角线是直角边的

√2

(根号二)。如果我们知道对角线长度是

.25em
+ .50em = .75em

，然后

background-size

的尺寸是

.75em
/ √2

。代码如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
font-size:40px;
}
div{
width: 200px;
height: 200px;
color:#fff;
}
.pt1_7{
/*1em等于40px  蓝 .25em为10px   黑-------.5em为20px
如果按照正方形的正方形的对角线是直角边的√2
那对角边为  （.25+.5）/Math.sqrt(2)*40  约等于21
转换为px就是 (10+20) /Math.sqrt(2)     约等于21

*/
background: linear-gradient(135deg, #000 .25em, #0092b7 0);//疑问1.为什么这里是0而不是.5em？
background-size: 21px 21px;
}
</style>
</head>
<body>
<div class="pt1_7">
1EM
</div>
</body>
</html>

效果:

这并不是我想要的；那我们试一下其他方式，例如.25em的黑色条纹放在中间呢？让我们试试！background: linear-gradient(135deg, #0092b7 calc(50% - .125em) /* blue corner */, /*疑问2：这里的.125是怎么得到的*/ #000 0, #000 calc(50% + .125em) /* black stripe */, #0092b7 0 /* blue corner */);效果：

是不是比我们的效果有点类似了【除了黑色条纹右下角【黑色渐变结束】和左下角【黑色渐变开始】少了一个类似三角形的一块】细心对比能发现，这些缺块将黑色条纹宽度一半(

.25em

的一半就是

.125em

)【解答疑问一】。

下面我们的工作就是把这个缺的三角形块补回来：background: linear-gradient(135deg, #000 .125em /* black corner */, #0092b7 0, #0092b7 calc(50% - .125em) /* blue stripe */, #000 0, #000 calc(50% + .125em) /* black stripe */, #0092b7 0, #0092b7 calc(100% - .125em) /* blue stripe */, #000 0 /* black corner */);效果:

但这不是最终效果，因为我们呢的rem转px存在误差，还有我们多了俩个半条黑色条纹这直接导致对角线的计算不正确。从左上角到右下角，我们现在有一半的黑色条纹(

.125em

)，蓝色条纹(

.5em

)，黑色条纹(

.25em

)，另一个蓝色条纹(

.5em

)和另一个半的黑色条纹(

.125em

)。所以加起来对角线是

1.5em

。这意味着我们需要改变

background-size

的值为

1.5
em / √(2) 1.5 em /√(2)

约等于42px修正后可以看到效果如下图:

/******************************疑问一，今天下班再做详细解答实在是困了，现在是2016/3/14凌晨3:25********************************/

在解答疑问一和为什么开篇的时候我示范了多个背景“z-index”，我们先看一个简单实例，这会解开更多疑惑： css：background: linear-gradient(135deg, #000 20px,#0092b7 40px,red 80px,#0092b7 200px);我想写一个由20px #000、20px #0092b7、40px red、120px #0092b7 四条色块组成的div，可看到以上代码实现效果如下：

的确可以生成了四条色块组成的渐变div问：可是这又能怎么样？效果本来就是这样的答：background: linear-gradient(135deg, #000 20px,#0092b7 40px);A.代码红色部分为当前颜色在对角线上终止的位置，#000的终止位置为20px，#0092b7为终止位置为40px，但是相邻的色块直接会互相侵染,实际值永远不会是我们写的终止位置的那个数值[如果我们要的是斑马线呢？]B.所有色块的实际终点位置都为div对角线最大值，前面的颜色值生成的色块永远比后面写入的颜色块的z-index高，前面的颜色块会覆盖后面的颜色块[这是开篇前第一个实例的目的]/*我写不下去了，感觉自己还是搞不懂*/径向渐变：http://blog.csdn.net/playboyanta123/article/details/9303857

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航