1.边框内圆角（需要掌握知识：box-shadow，outline，多重边框）

方案一（用两个标签）

html

<div class="one">
  <div class="two"></div>
</div>

css

<style>
 .one{
      width:200px;
      hight:100px;
      background:red;
      padding:10px;
}
.two{
      width:180px;
      hight:80px;
      background:#ccc;
      border-radius:10px;
}

</style>

方案二

border-radius: .8em;
outline: .6em solid #665;   
box-shadow: 0 0 0 .5em #665;

2.条纹背景

一、水平背景渐变

background: linear-gradient(red 30%,#65a 70%) ;

二、垂直背景渐变

background: linear-gradient(to right,red 0.1%,#65a 99%) ;

三、斜向渐变

background: linear-gradient(45deg,red 0.1%,#65a 99%) ;

注（如果多个色标具有相同的位置，他们会产生一个无限小的过度区）

四、条纹背景

background: linear-gradient(red 50%,#65a 50%);
background-size: 30px 30px;

五、斜向条纹

background: linear-gradient(45deg,
                     #fb3 25%,#58a 0,#58a 50%,
                     #fb3 0,#fb3 75%,#58a 0) ;

background-size: 30px 30px;