你应该知道的CSS小技巧

1. 滚动条美化
2. 三角形
3. Tooltips
4. 表单美化
5. 纯CSS波浪线
6. 选择文本的颜色
7. table的斑马线

::-webkit-scrollbar {}   //滚动条整体部分     
::-webkit-scrollbar-track{}  //滚动条滑轨  
::-webkit-scrollbar-track-piece{}  //内层轨道，滚动条中间部分
::-webkit-scrollbar-thumb {}  //滚动条滑块
::-webkit-scrollbar-button{}  //滑轨两头的监听按钮
::-webkit-scrollbar-button:start {}  // 滑轨顶部的监听按钮
::-webkit-scrollbar-button:end {}    //滑轨底部的监听按钮
::-webkit-scrollbar-corner {}    //横向滚动条和纵向滚动条相交处的尖角
::-webkit-resizer{}  //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

//还可设置鼠标移动上去时的变化
::-webkit-scrollbar-track:hover {}       
::-webkit-scrollbar-thumb:hover {}
::-webkit-scrollbar-button:start:hover {} 
::-webkit-scrollbar-button:end:hover {} 

div::after{
  content: '';
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #333;
  border-left: 10px solid #transparent;
}

.tooltips{   
  display:inline-block;   
  width:100px;   
  padding:3px 10px;   
  border:1px solid #d9d9d9;   
  position:relative;
			}   
.tooltips:hover:before,.tooltips:hover:after{   
  opacity:1;   
}   
.tooltips:before,.tooltips:after{   
  -webkit-transition:all .4s;   
  transition:all .4s;   
  opacity:0;   
}   
.tooltip1:before{   
  position:absolute;   
  content:'';   
  top:100%;   
  left:50%;   
  border-top: 5px solid transparent;   
  border-right: 5px solid transparent;   
  border-bottom: 5px solid rgba(0,0,0,.5);   
  border-left: 5px solid transparent;   
  -webkit-transform:translate(-50%,-5px);   
  transform:translate(-50%,-5px);    
}   
.tooltip1:after{   
  content:attr(data-tip);   //注意这里
  position:absolute;   
  top:100%;   
  left:50%;   
  padding:3px 10px;   
  background:rgba(0,0,0,.5);   
  color:#fff;   
  white-space:nowrap;   
  -webkit-transform:translate(-50%,5px);   
  transform:translate(-50%,5px);   
}

//div
<div class="tooltip1 tooltips" data-tip="哈哈，我是tooltip">这里！这里！</div>

label{   
  position:relative;   
  display:inline-block;   
  cursor:pointer;   
}   
label>input{   
  display:none;   
}   
label .radio-inner{   
  position:relative;   
  padding-left:35px;   
}   
label .radio-inner:before{   
  content:'';   
  position:absolute;   
  width:20px;   
  height:20px;   
  top:0;   
  left:0;   
  border:1px solid #d9d9d9;   
  border-radius:50%;   
}   
label .radio-inner:after{   
  content:'';   
  position:absolute;   
  width:10px;   
  height:10px;   
  top:6px;   
  left:6px;   
  background:#fff;   
  border-radius:50%;   
}   
label>input:checked+.radio-inner:before{   
  border-color:#009a61;   
}   
label>input:checked+.radio-inner:after{   
  background:#009a61;       
}

.wave{   
  height:10px;   
  width:100px;   
  background-image:repeating-radial-gradient(transparent,transparent 5px,#333 6px,#333 15px);   
  background-image:-webkit-repeating-radial-gradient(transparent,transparent 5px,#333 6px,#333 15px);   
  background-size: 20px 21px;   
  background-repeat: repeat-x;   
}

.selection::selection{   
  background:red;   
  color:#fff;   
}

.table tr:nth-child(odd){   
  background:#333;   
  color:#fff;   
}   
.table tr:nth-child(even){   
  background:#d9d9d9;   
}