<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
width: 1000px;
height: 900px;
}
.bg {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
color: white;
font-size: 36px;
}
/*渐变*/
.bg-first {
/**
* 0-20%为#cc95c0,20%-80%为#cc95c0到#7aa1d2的渐变,80%-100%为#7aa1d2
*/
background: linear-gradient(#cc95c0 20%, #7aa1d2 80%);
}
/*分割*/
.bg-second {
/**
* 0-50%为#cc95c0,50%-100%为#7aa1d2
*/
background: linear-gradient(#cc95c0 50%, #7aa1d2 50%);
}
/*斑马条纹*/
.bg-third {
background: linear-gradient(#cc95c0 50%, #dbd4b4 50%);
background-size: 100% 40px;
}
/*三色斑马条纹*/
.bg-fourth {
/**
* 100% ÷ 3 = 33.3%
*/
background: linear-gradient(#cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);
background-size: 100% 40px;
}
/*竖向双色斑马条纹*/
.bg-fifth {
background: linear-gradient(to right, #cc95c0 50%, #dbd4b4 0);
background-size: 40px 100%;
}
/*竖向三色斑马条纹*/
.bg-sixth {
/**
* 100% ÷ 3 = 33.3%
*/
background: linear-gradient(to right, #cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);
background-size: 40px 100%;
}
/*斜向双色斑马条纹*/
.bg-seventh {
/**
* 50% ÷ 2 = 25%
*/
background: linear-gradient(45deg, #cc95c0 25%, #dbd4b4 0, #dbd4b4 50%, #cc95c0 0, #cc95c0 75%, #dbd4b4 0);
background-size: 40px 40px;
}
/*斜向三色斑马条纹*/
.bg-eighth {
/**
* 50% ÷ 3 = 16.66%
*/
background: linear-gradient( 45deg, #cc95c0 0, #cc95c0 16.66%, #dbd4b4 16.66%, #dbd4b4 33.33%, #7aa1d2 33.33%, #7aa1d2 50%, #cc95c0 50%, #cc95c0 66.66%, #dbd4b4 66.66%, #dbd4b4 83.33%, #7aa1d2 83.33%, #7aa1d2);
background-size: 40px 40px;
}
/*repeating-linear-gradient虚化斑马条纹*/
.bg-ninth {
background: #cc95c0;
background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 15px, transparent 0, transparent 30px);
}
/*repeating-linear-gradient斜向双色条纹*/
.bg-tenth {
background: repeating-linear-gradient(45deg, #cc95c0, #cc95c0 15px, #dbd4b4 0, #dbd4b4 30px);
}
/*鳞片式三角条纹*/
.bg-eleventh {
background: linear-gradient(45deg, #cc95c0 50%, #dbd4b4 0);
background-size: 40px 40px;
}
/*十字格条纹*/
.bg-twelveth {
background-image: linear-gradient(0deg, rgba(200, 0, 0, .5) 50%, transparent 50%), linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%);
background-size: 40px 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="bg bg-first">示例一</div>
<div class="bg bg-second">示例二</div>
<div class="bg bg-third">示例三</div>
<div class="bg bg-fourth">示例四</div>
<div class="bg bg-fifth">示例五</div>
<div class="bg bg-sixth">示例六</div>
<div class="bg bg-seventh">示例七</div>
<div class="bg bg-eighth">示例八</div>
<div class="bg bg-ninth">示例九</div>
<div class="bg bg-tenth">示例十</div>
<div class="bg bg-eleventh">示例十一</div>
<div class="bg bg-twelveth">示例十二</div>
</div>
</body>
二、毛玻璃效果
<main>
<blockquote>
"少年贪玩,青年迷恋爱情,壮年汲汲于成名成家,暮年自安于自欺欺人。人寿几何,顽铁能炼成的精金,能有多少?但不同程度的锻炼,必有不同程度的成绩;不同程度的纵欲放肆,必积下不同程度的顽劣。
<br />
<br />
"上苍不会让所有幸福集中到某个人身上,得到爱情未必拥有金钱;拥有金钱未必得到快乐;得到快乐未必拥有健康;拥有健康未必一切都会如愿以偿。保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。一切快乐的享受都属于精神,这种快乐把忍受变为享受,是精神对于物质的胜利,这便是人生哲学。"
<footer>——
<cite>杨绛</cite>
</footer>
</blockquote>
</main>
body, main::before{
background: url("imgs/animals.jpg") 0 / cover fixed;
}
main{
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 800px;
height: 500px;
line-height: 2;
margin: auto;
border-radius: 5px;
background: rgba(255, 255, 255, .3);
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
overflow: hidden;
}
main::before{
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
filter: blur(20px);
z-index: -1;
margin: -30px;
}
小三角
.sanjiao:before{
position: absolute;
left: 22%;
right: 20/px;
top: 12.2%;
width: 12px;
height: 12px;
margin-top: -2px;
border-right: 1px solid #3498DB;
border-bottom: 1px solid #3498DB;
-webkit-transform: rotate(225deg);
content: '';
}