你应该知道的CSS小技巧
- 滚动条美化
- 三角形
- Tooltips
- 表单美化
- 纯CSS波浪线
- 选择文本的颜色
- 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;
}