css技巧

移动端1px解决方案

产生原因：设备像素比

window.devicePixelRatio = 物理像素/css像素

解决方案：

1. ios设备：

   border:0.5px solid red; //IOS可用，安卓不可用
   

2. 通用型：

   //使用伪类+scale(.5)
   div::after{
       position:absolute;
       content:"";
       top:0;
       left:0;
       width:1px;
       height:100%;
       transform:scaleX(0.5);
       background-color:red;
   }
   
   

3. box-shadow实现：

box-shadow: 0  -1px 1px -1px #e5e5e5,   //上边线
            1px  0  1px -1px #e5e5e5,   //右边线
            0  1px  1px -1px #e5e5e5,   //下边线
            -1px 0  1px -1px #e5e5e5;   //左边线

position:sticky

css3新增的定位属性。目前兼容性不够好。火狐和chrome50以上才支持，IE不支持。 设置该属性值后，元素仍然处于文档流中，只是当元素要被移出视口时，会变成和fixed类似的形态。

body{
    background-color: pink;
    height: 4000px;
}
p{
    position: sticky;
    top:0;
}

实现 (5).add(3).minus(2) 功能

Number.prototype.add = function(n){
    return this.valueof()+n;
}

Number.prototype.minus = function(n){
    return this.valueof()-n;
}

清除记住密码的默认样式

浏览器有记住密码的默认样式，如果不需要默认样式，我们的第一思路是提升我们自己的样式的优先级进行覆盖， 但是对于记住密码的默认样式使用优先级覆盖时，对background-color、background-image、color三个属性效果无效（具体原因不清楚）。所以我们可以通过阴影的方式去遮挡默认样式。

input:-internal-autofill-selected{
    box-shaow:0 0 0 1000px #fffff inset; /* 遮挡默认的背景颜色*/
    -webkit-text-fill-color: #333; /*修改记住密码的字体颜色*/
}

自定义滚动条样式

三个伪元素。模仿typescript中文网滚动条样式

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 2.5px rgba(0, 0, 0, .3);
    border-radius: 2.5px;
    background-color: #294E80;
    opacity: .7;
    transition: opacity ease-in-out 200ms;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
    border-radius: 2.5px;
    background-color: #fbf4f4;
}