静态页面总结

1. box-shadow: inset offset-x offset-y blur-radius spread-radius
    每个<shadow>被定义为下面这些值的组合：
        inset关键字，将外部投影转变为内部阴影。默认值是空，为外部投影。
        第1个长度offset-x代表阴影x轴向的偏移，正值向右，负值向左。
        第2个长度offset-y代表阴影y轴向的偏移，正值向下，负值向上。
        第3个长度blur-radius代表阴影模糊半径，不允许负值。
        第4个长度spread-radius代表阴影扩展半径，正值放大，负值缩小。将元素等比例缩放
        color代表投影的颜色。

2. z-index
   z-index的值在下列条件下才具有可比性，将元素按照z-index的值进行叠放显示
   1. position必须是 absolute, relative, fixed
   2. 元素必须同级比较，假如父子关系，子元素会在父元素上面

3. 改变下拉框样式, 改变文本框的样式
   select {
       /*清除select的边框样式*/
       /*    border: none;*/
       border: 1px solid #D5D5D5;
       /*清除select聚焦时候的边框颜色*/
       outline: none;
       /*隐藏select的下拉图标*/
       appearance:none;
       -webkit-appearance:none;
       -moz-appearance: none;
       padding: 0 20px 0 5px; margin-right:12px;
       width: 110px; height: 19px; line-height: 15px; box-sizing: border-box;
       background: url("../images/select_btn.png") no-repeat right;
       font-weight: lighter;
   }
   /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
   .right-main .filter select::-ms-expand{ display: none; }
   JQuery 下拉框效果
   http://www.xwcms.net/webAnnexImages/fileAnnex/201709/23602/index.html


5. 背景色渐变 background: linear-gradient(#A6140F, #5F0C05);
   线性渐变 - 从上到下（默认情况下）
   background: linear-gradient(direction, color-stop1, color-stop2, ...);
     background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
     background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
     background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
     background: linear-gradient(red, blue); /* 标准的语法 */

     标准语法 和 前缀模式的区别： to left === right
     background: linear-gradient(to left, white, black);
     background: -webkit-linear-gradient(right, white, black);

     background: linear-gradient(right, white, black); /*从右到左*/
     background: linear-gradient(left, white, black); /*从左到右*/
     background: linear-gradient(left top, white, black); /*从左上角到右下角*/

     background: linear-gradient(white, black, white); /*使用多个颜色结点*/
     background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);


6. 相对定位
   相对于自己定位，使用left top right bottom的值相对于自己位移
   margin是外边距，是在left top right bottom的基础上
   
7. 绝对定位
   相对于最近的一个设置position属性父级或者祖父级定位

8. float 和 display: inline-block的区别
   ① 设置有inline-block的元素，如果有换行会有4个像素的空隙
   ② display:inline-block; 设置这个属性的元素, 会显示在一行，如果其中一个设置了margin-top，那么所有的元素都会下移
   设置成float就不会。
   span, a, .d2{
       display: inline-block;
       /*float: left;*/
       border: solid;
   }
   a{
       height: 50px;
       /*margin-top: 20px;*/
       vertical-align: middle;
   }
   span{
       height: 60px;
   }
   <span>spanspanspanspan</span><a href="#">aaaaaaa</a><div class="d2">sdsds</div>


9. 利用伪元素制作多个背景图

10. rgba() 和 rgb()函数
    rgba(R,G,B,A)
    rgba(R,G,B)
        R：红色值。正整数 | 百分数
        G：绿色值。正整数 | 百分数
        B：蓝色值。正整数 | 百分数
        A：Alpha透明度。取值0~1之间。