HTML5高级样式

1. box-shadow阴影设置

   box-shadow: 5px 10px 20px 10px black;
   /*左，上，模糊度，延伸半径，颜色*/

2. 检索浏览器兼容性 ：http://www.caniuse.com

3. 特殊字体

   @font-face{
   font-family:自定义字体名
   src:字体文件路径
   }

4. 渐变

   1. 线性渐变

      background: repeating-linear-gradient(to right, green 20%,lightblue 50%);
      /*方向，颜色一，颜色二，第一个值如果大于第二个值就不是渐变了*/

   2. 径向渐变

      background: radial-gradient( circle,green 20%,lightblue 50%);
      /*类型，颜色一，颜色二*/

   3. 重复渐变：background:repeating-radial-gradient()

5. 变形：transform

   .div01-css:hover{
           /*旋转中心*/
           transform-origin: center;
           /*rotate旋转，scale缩放， skew斜切*/
           transform: rotate(-45deg) scale(2,1) skew(0deg,45deg);
       }

6. 脱离文档流的盒子模型的定位

   .div01-css{
           background: gray;
           margin: 100px;
           /*left参照父容器的尺寸*/
           left: 50%;
           position: absolute;
           /*实现绝对定位的居中，参照自己的尺寸*/
           transform: translate(-50%,0);
       }

7. 过渡动画:transition

   .div01-css{
           width: 100px;
           height: 100px;
           border: solid 1px gray;
           margin: 200px;
           /*控制的属性，持续时间，效果，延迟时间*/
           transition: transform 1s linear 1s, background 1s,box-shadow 1s;
       }
       .div01-css:hover{
           transform: rotate(45deg);
           transform-origin: center;
           background: lightblue;
           box-shadow: 3px 3px 5px black;
       }

8. 关键帧动画：animation

   @keyframes moveon {
           0%{background:#c00;}
           50%{background:orange;}
           100%{background:yellowgreen;}
       }
       .div01-css{
           width: 100px;
           height: 100px;
           border: solid 1px black;
           margin: 200px;
           /*动画名，持续时间*/
           animation: moveon 3s;
       }

9. 响应式布局

三种屏幕的规格

类型	屏幕规格	临界点
pc	1024-普通屏 1280-高清屏	970-1170
pad	768-1024	750-970
phone	768以下	750

/*宽度在750-970之间时*/
@media screen and (max-width:970px) and (min-width: 750px){
           .container{
               width: 750px;
           }
           .container>div{
               /*控制内部所有的元素*/
               min-width: 375px;
               max-width: 250px;
           }
       }