css 技巧 （持续更新）

一、滚动条样式

 

/*自定义滚动条-----隐藏型*/

.scroll::-webkit-scrollbar-track{

border-radius: 1px;

 

}

 

.scroll::-webkit-scrollbar{

height: 1px;

width: 1px;

background-color:transparent;

}

/*定义滑块 内阴影+圆角*/

.scroll::-webkit-scrollbar-thumb{

background-color:transparent;

}

 

/*ie*/

.scroll{

scrollbar-arrow-color: rgba(231, 231, 245, 0.5);

-ms-scrollbar-arrow-color: rgba(231, 231, 245, 0.5);

scrollbar-base-color: #f1f1f1;

-ms-scrollbar-base-color: #f1f1f1;

scrollbar-shadow-color: #fafafa;

scrollbar-track-color: rgba(253, 253, 253, 0.5);

-ms-scrollbar-track-color: rgba(253, 253, 253, 0.5);

-ms-overflow-style: none;

-ms-scroll-rails: none;

-ms-overflow-style: none;

}

 

/*自定义滚动条-----黑线条型*/

.linescroll::-webkit-scrollbar-track{

border-radius: 10px;

background-color: rgba(201, 201, 202, 0.5);

}

 

.linescroll::-webkit-scrollbar{

height: 5px;

    width: 5px;

background-color:rgb(109, 108, 108);

}

/*定义滑块 内阴影+圆角*/

.linescroll::-webkit-scrollbar-thumb{

background-color:rgb(88, 88, 88);

}

 

 

二、优化ie下select样式

 

select {
/*Chrome和Firefox里面的边框是不同的，因此复写了一下*/
border: solid 1px #A9A9A9;

/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/
background:#fff url("../img/select_reset.png") no-repeat scroll right center;

/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-left:7px;
padding-right: 17px;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

 

三、一句代码让你的彩色图片变灰

img.desaturate {    
  filter: grayscale(100%);    
  -webkit-filter: grayscale(100%);    
  -moz-filter: grayscale(100%);    
  -ms-filter: grayscale(100%);    
  -o-filter: grayscale(100%);
}

 

 

4. 使用 :not() 在菜单上应用/取消应用边框

……能够直接使用 :not() 伪类来应用元素：

.nav li:not(:last-child) {  
 border-right: 1px solid #666;
}

 

五、去掉谷歌 默认 黄色背景

.form input{
　　height: 38px;
　　border-color: #2599cf;
　　color: #0374d0;
　　width: 220px;
　　padding-left: 40px; 
　　border:1px solid;

　　background: transparent content-box;

 　   height: 0;

　　padding: 19px 0 19px 35px;

}

 

 

六、使用nth-child 选择列表项1到n

li {
 display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
 display: block;
}

七、表格单元格等宽

　table{

  　　table-layout: fixed;

　　}

 

八、文本渐变

h2[data-text] {   

position: relative;

}

h2[data-text]::after {

  content: attr(data-text);

  z-index: 10;

  color: #e3e3e3;

  position: absolute;

  top: 0;   left: 0;

 -webkit-mask-image:  -webkit-gradient(linear, left top,  left bottom, from(rgba(0,0,0,0)),  color-stop(50%, rgba(0,0,0,1)),  to(rgba(0,0,0,0)));

}

还有另一种：

background: linear-gradient(to right, red, blue);

-webkit-background-clip: text;

color: transparent;

 

九、文本模糊

color: transparent;   
text-shadow: 0 0 5px rgba(0,0,0,0.5);

 

 十、不使用flex，文本两端对齐

第一种，没有嵌套标签：

 第二种，有嵌套标签：

　　html代码：

<div class="container">    
  <div class="justify">
     <span>1</span><span>2</span><span>3</span><span>4</span>
  </div>
  <div class="justify">
     <span>1</span><span>2</span><span>3</span>     
  </div> 
</div>

　　样式：

.container{
  width:400px;
}
.justify{
  width:100%;
  height:24px;
  text-align: justify;
  position:relative;
}
span{
  display:inline-block;
  width: 20px;
  text-align: center;
  border-radius: 4px;
  background: blueviolet;
  color:#fff;
}

　　效果以下：

没有获得意料之中的结果，并无实现所谓的两端对齐，缘由是：

虽然 `text-align:justify` 属性是全兼容的，可是要使用它实现两端对齐，须要注意在模块之间添加**[空格/换行符/制表符]**才能起做用。

也就是说每个 1 间隙，至少须要有一个空格或者换行或者制表符才行。

而后，咱们更新一下 HTML 结构，采用一样的 CSS，结果是：

依然没有实现，缘由在于 justify 只有在存在第二行（行块元素）的状况下，第一行才两端对齐，因此在这里，咱们须要制造一个假的第二行，而 :after 伪元素正好再适合不过。

 

十一、美化 默认的checkbox的样式

思路： 隐藏默认的checkbox ， 经过label 标签for属性  锚定checkbox ，控制是否选中， 给label标签自定义样式

<ul>
   <li class="list-body">
     <input type="checkbox" id="checkbox-1" hidden />
     <label for="checkbox-1"></label>
     <span>类型1</span>
   </li>
   <li class="list-body">
     <input type="checkbox" id="checkbox-2" hidden />
     <label for="checkbox-2"></label></span>
     <span>类型2</span>
   </li>
   <li class="list-body">
     <input type="checkbox" id="checkbox-3" hidden />
     <label for="checkbox-3"></label></span>
     <span>类型3</span>
   </li>
</ul>

ul ,ol{
     list-style: none;display: inline-block; 
 }

.list-body label{
    width: 14px;
    height: 14px;
 }

[id^="checkbox-"] + label {
    background-color: #FFF;
    border: 1px solid;
    border-color: #C1CACA;
    border-radius: 4px;
    float:left;
    position:relative;
    top: 3px;
    right: 4px;
}
[id^="checkbox-"]:checked + label {
    border-color: #38e;
    transition: all 0.5s linear 0s;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
}
[id^="checkbox-"]:checked + label:after {
    content: '\2713';
    position: relative;
    top: -5px;
    left: 2px;
    color: #38e;;
    text-align: center;
    font-size: 0.8rem;
 }　

效果：

 十二、改变input 光标的颜色

 1三、利用 transparent 属性实现各类三角形

 1四、实现文字的 波浪线 或虚线效果


相信你们对于 text-decoration 这个属性并不陌生，在重置 a 标签的默认样式时，咱们常常要这样写：text-decoration: none; 可能对它了解的人也不多，实际上 text-decoration 是一个复合属性，由 line、style 和 color 组成。

 

   1五、js能够获取修改css原生变量

 

 

 1六、元素可编辑