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;