CSS 美化

1.美化滾動條

       * {
            scrollbar-base-color: #2d5333;
            scrollbar-3dlight-color: #fff;
            scrollbar-highlight-color: #fff;
            scrollbar-track-color: #eee;
            scrollbar-arrow-color: #2d5333;
            scrollbar-shadow-color: #fff;
        } 
        ::-webkit-scrollbar {  
          width: 8px;  
          height: 11px;  
        }  
        ::-webkit-scrollbar-track,  
        ::-webkit-scrollbar-thumb {  
        /*   border-radius: 999px;   */
        /*   border: 5px solid transparent;   */
        }  
        ::-webkit-scrollbar-track {  
        /*   box-shadow: 1px 1px 5px rgba(0,0,5,.2) inset;   */
          background-color: #eee;
        }   /* 滾動條的滑軌背景顏色 */
        ::-webkit-scrollbar-thumb {  
        /*   min-height: 20px;   */
        /*   background-clip: content-box;   */
        /*   box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;   */
          background-color: #2d5333; 
        }  /* 滑塊顏色 */
        ::-webkit-scrollbar-corner {  
        /*   background: transparent;   */
          background-color: black;
        }  /* 橫向滾動條和縱向滾動條相交處尖角的顏色 */
        ::-webkit-scrollbar-button {
          background-color: #eee;
        } /* 滑軌兩頭的監(jiān)聽按鈕顏色 */

2.下拉框 ： 

.selectwrap::after 這個樣式的content，可以使用自制圖標

<div class="selectwrap">
	<select class="selecttype">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
	</select>
</div>
.selecttype {
    position: relative;
    z-index: 2;
    padding: 0 20px 0 10px;
    display: inline-block;
    height: 40px;
    border: 1px solid #a0a0a0;
    border-radius: 4px;
    color: #333;
    font-weight: normal;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}
.selecttype::-ms-expand{
/*     color: #fff; */
/*     font-size:20px; */
/*     padding:5px 9px; */
/*     background: #0054a7; */
    
    display: none;
}

.selectwrap {
    position: relative;
    display: inline-block;
    z-index: 1;
    vertical-align: top;
}

.selectwrap::after {
    content: "\25BC";
    position: absolute;
    top: 10px;
    right: 5px;
/*     font-family: 'lsh-icon' !important; */
    font-size: 16px;
    color: #000;
    z-index: 1;
}

3. 背景色漸變：

	background-color:#056e68;
	background-image:-webkit-linear-gradient(top, #2495ED 0%, #056e68 100%);
	background-image:-moz-linear-gradient(top, #2495ED 0%, #056e68 100%);
	background-image:-ms-linear-gradient(top, #2495ED 0%, #056e68 100%);
	background-image:-o-linear-gradient(top, #2495ED 0%, #056e68 100%);
	background-image:linear-gradient(to bottom, #2495ED 0%, #056e68 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#2495ED', EndColorStr='#056e68');
	box-shadow:inset 1px 1px 3px #666