你应该知道的CSS小技巧

2018-06-19 18:30 更新
       自从CSS3面世,纯CSS能实现的效果实在是太多了,今天有空,特意的整理了一下(只是部分,后续会继续添加)。

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

效果:


1、滚动条美化

::-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 {} 


2、三角形

div::after{

  content: '';

  border-top: 10px solid transparent;

  border-right: 10px solid transparent;

  border-bottom: 10px solid #333;

  border-left: 10px solid #transparent;

}


3、Tooltips

.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>

主要是利用content: attr(data-tip)属性。

4、表单美化

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;       

}

主要是利用label的for属性和input的id属性的关联,还有:check伪类和E+F选择器

5、纯CSS波浪线

.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;   

}


6、选择文本的颜色

.selection::selection{   

  background:red;   

  color:#fff;   

}


7、table的斑马线

.table tr:nth-child(odd){   

  background:#333;   

  color:#fff;   

}   

.table tr:nth-child(even){   

  background:#d9d9d9;   

}

主要是利用伪类 :nth-child()的参数为odd(奇数)和even(偶数)来设置





以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号