《css 揭秘》

HTML

<div class='div0'>
    渐变背景
  </div>

  <div class='div1'>
    
  </div>

<div class='div2'>

</div>
<div class='div3'>

</div>
<div class='div4'>

</div>
<div class='div5'>

</div>

CSS

body {
	background: #000;
}

.div0 {
    width:10rem;
    height:8rem;
    background:linear-gradient(#fb3,#58a);
    padding:1rem;
    outline:0.6rem solid #655;
    box-shadow:0 0 0 0.4rem #655;
    border-radius:0.8rem;
    margin:10rem auto;
}
.div1{
    width:10rem;
    height:8rem;
    background:linear-gradient(#fb3 50%,#58a 50%);
    background-size:100% 30px;
    padding:1rem;
    outline:0.6rem solid #655;
    box-shadow:0 0 0 0.4rem #655;
    border-radius:0.8rem;
    margin:10rem auto;
}
.div2{
    width:10rem;
    height:8rem;
    background:linear-gradient(to right,#fb3 50%,#58a 50%);
    background-size:30px 100%;
    padding:1rem;
    outline:0.6rem solid #655;
    box-shadow:0 0 0 0.4rem #655;
    border-radius:0.8rem;
    margin:10rem auto;
}
.div3{
    width:10rem;
    height:8rem;
    background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
    background-size:42px 42px;
    padding:1rem;
    outline:0.6rem solid #655;
    box-shadow:0 0 0 0.4rem #655;
    border-radius:0.8rem;
    margin:10rem auto;
}
.div4{
    width:10rem;
    height:8rem;
    background:repeating-linear-gradient(45deg,#fb3 ,#fb3 15px,#58a 0,#58a 30px);
    background-size:42px 42px;
    padding:1rem;
    outline:0.6rem solid #655;
    box-shadow:0 0 0 0.4rem #655;
    border-radius:0.8rem;
    margin:10rem auto;
}
.div4{
    width:10rem;
    height:8rem;
    background:repeating-linear-gradient(45deg,#79b ,#79b 15px,#58a 0,#58a 30px);
    background-size:42px 42px;
    padding:1rem;
    outline:0.6rem solid #655;
    box-shadow:0 0 0 0.4rem #655;
    border-radius:0.8rem;
    margin:10rem auto;
}