css揭秘第二章

0.单边框
width: 100px;
height: 100px;
background-color: chartreuse;
border: 2px dashed rgb(236, 47, 47);
默认情况背景颜色会延伸到边框下这时候用
background-clip: padding-box;

透明边框的创建
width: 100px;
height: 100px;
background: white;
border: 10px solid hsla(0,0%,100%,.5);
background-clip: padding-box;

1. 多重边框
   利用box-shadown模拟多重边框
   width: 100px;
   height: 100px;
   background-color: chartreuse;
   border: 5px solid rgb(236, 47, 47);
   box-shadow: 0px 0px 0px 10px #655;
   其中box-shadown可以接受多组阴影，用来模拟多重边框
   box-shadow: 0px 0px 0px 10px #655,0px 0px 0px 20px royalblue;
   
   box-shadown的缺陷在于只能模拟外部多重边框且只能是solid，但是outline可以做到模拟边框甚至是用虚线 ，它的缺陷是只能模拟两重的边框
   background: yellowgreen;
   border: 10px solid #655;
   outline: 2px dashed deeppink;
   outline-offset:-5px;
   

2. position
   background: url(“show.png”) no-repeat #58a;
   background-position: right 20px bottom 20px;
   定义了图片位置
   background-origin: content-box;
   定义了图片起始的位置

3. 边内圆角
   background: #58a;
   border-radius: 10%;
   outline: .6em solid #655
   普通圆角边框的缺陷如下
   box-shadown解决如下box-shadow: 0px 0px 0px 5px #655;
   

4. 条纹渐变
   background: linear-gradient(#fb3 20%, #58a 80%);
   background: linear-gradient(#fb3 50%, #58a 50%);
   background: linear-gradient(#fb3 10%, #58a 50%);
   
   竖条纹
   background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);
   background-size: 30px 100%;
   斜条纹
   background: repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0, #58a 30px);
   横条纹
   background: linear-gradient(#fb3 50%, #58a 50%);
   background-size: 100% 30px;
   
   利用渐变完成网格效果
   background: #58a;
   background-image:
   linear-gradient(white 1px, transparent 0),
   linear-gradient(90deg, white 1px, transparent 0);
   background-size: 30px 30px;
   
   利用径向渐变产生波点
   background-image:radial-gradient(rgb(140, 210, 204) 30%, transparent 0);
   background-size: 30px;
   
   棋盘
   background: #eee;
   background-image:
   linear-gradient(45deg, #bbb 25%, transparent 0),
   linear-gradient(45deg, transparent 75%, #bbb 0);
   background-size: 30px 30px;
   background-position: 0px 0px ,15px 15px;
   
   信封边框
   padding: 1em;
   border: 16px solid transparent;
   border-image: 16 repeating-linear-gradient(-45deg,red 0, red 1em,transparent 0, transparent 2em, #58a 0, #58a 3em,transparent 0, transparent 4em);