css不常用技巧

1、移除input[type=number]的上下箭头

/*谷歌*/
.inputNumber input[type='number']::-webkit-outer-spin-button,
.inputNumber input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
/*火狐*/
.inputNumber input[type='number'] {
    -moz-appearance: textfield;
}

2、box-shadow属性如果不写颜色值，默认取color字体颜色，如果自身没有字体颜色会一直向上寻找

.aa{
    color: red;
    box-shadow: 0 0 3px; // 颜色为red
}

3、使用边框dashed的长度太短，不够美观，可以用背景渐变模拟边框

红色是模拟的边框，蓝色是dashed

width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;

4、当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。

移动端报错：Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted

touch-action: none; 
none：系统默认菜单被禁用
default：系统默认菜单不被禁用

5、改变滚动条样式

`/* 设置滚动条的样式 */`
::-webkit-scrollbar {`
    width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
}

6、css设置单行内容溢出显示省略号...

内容内容内容...

/* 只对块级元素有效，并且需要有长度限制 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

7、不确定长宽时，如何设置元素为正方形

.aa{
    width: 50%;
}
.aa:after{
    content: '';
    padding-bottom: 100%; /* 子元素设置百分比会以父元素的长度来计算，注意是宽度 */
}