《CSS SECRETS》Chapter 2-5
Lea Verou
测试所用浏览器：Chrome
html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style_stripe.css">
<title>条纹样式</title>
</head>
<body>
<!-- 水平-渐变样式 -->
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<!-- 水平-双色双条纹 -->
<div class="box box3">box3</div>
<!-- 水平-双色多条纹 -->
<div class="box box4">box4</div>
<div class="box box5">box5</div>
<!-- 水平-多色多条纹 -->
<div class="box box6">box6</div>
<!-- 垂直-多色多条纹 -->
<div class="box box7">box7</div>
<!-- 斜45度-双色多条纹 -->
<div class="box box8">box8</div>
<!-- 斜45度-多色多条纹 -->
<div class="box box9">box9</div>
<!-- 斜60度-双色多条纹 -->
<div class="box box10">box10</div>
</body>
</html>
css :
.box{
display: inline-block;
height: 200px;
width: 200px;
margin-right: 10px;
margin-bottom: 10px;
color: #fff;
font-size: 20px;
font-weight: 600;
text-align: center;
line-height: 200px;
}
.box1{
background: linear-gradient(red,green);
}
.box2{
background: linear-gradient(red 20%, green 80%);
}
.box3{
background: linear-gradient(red 50%, green 50%);
}
.box4{
/* background要先于background-size使用，不然background-size会无效 */
background: linear-gradient(red 50%, green 50%);
background-size: 100% 20%;
}
.box5{
/* 第二个颜色后的参数如果小于前者，则会被自动赋予与前者相同的值 */
background: linear-gradient(red 20%, green 0);
background-size: 100% 20%;
}
.box6{
background: linear-gradient(red 33.3%, green 0, green 66.6%, blue 0);
background-size: 100% 20%;
}
.box7{
/* 也可以使用90deg */
background: linear-gradient(90deg, red 33.3%, green 0, green 66.6%, blue 0);
background-size: 20% 100%;
}
.box8{
background: linear-gradient(45deg, red 25%, green 0, green 50%, red 0, red 75%, green 0);
background-size: 20% 20%;
}
.box9{
background: linear-gradient(45deg, red 16.7%, green 0, green 33.3%, blue 0, blue 50%, red 0, red 66.7%, green 0, green 83.3%, blue 0);
background-size: 20% 20%;
}
.box10{
background: repeating-linear-gradient(60deg, red, red 10%, green 0, green 20%);
}
效果如下图所示：
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
