常用的css小妙招，建议新手收藏

input修改光标颜色

<input type="number">
input{
  caret-color: rgba(0, 255, 0, 1.0);
}

div背景透明色

<div>背景颜色</div>
div{
   height: 100px;
   width: 100px;
   background: red;
   opacity: 0.5;  //值为:  0.1 -- 0.9
}

文字隐藏，只会隐藏内容，不会影响元素

<div>文字隐藏<div>
div{
   height: 100px;
   width: 100px;
   background: #ff6699;
   text-indent: -9999px;
}

让元素内容闪烁

<div class="div">闪烁</div>
.div{
  animation: div 3s linear infinite;
}
@keyframes div {
			0% {
				opacity: 1;
			}
			50% {
				opacity: 0.5;
			}
			100% {
				opacity: 0;
			}
		}

边框阴影

<div>边框阴影</div>
div{
  height: 100px;
  width: 100px;
  box-shadow:0 0 9px 3px #999;
}

文字阴影

<div class="div1">白色文本的阴影效果</div>
<div class="div2">霓虹灯效果的文本阴影</div>
.div1{
   color:#fff;
   text-shadow:2px 2px 4px #000;
}
.div2{
   color:#000;
   text-shadow:0 0 3px #f0f;
}

背景图片不铺满，自由控制

<div>背景图片不铺满，自由控制</div>
div{
  background-image: url(/static/images/login/upgrade.png);
  background-size: 100% 100%; 图片大小
  background-repeat: no-repeat;  //不铺满,只显示一张
  background-position: top right;  //如果你仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%
                       //x% y%       第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
                       
}

文本超出隐藏

<div class="div1">文字显示一行，一行之后溢出隐藏 </div>
<div class="div2">多行文字， </div>
.div1 {
        border: 1px solid black;
        width: 40px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-bottom: 20px;
        }
.div2 {
       border: 1px solid black;
       width: 40px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
        }
//核心      overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;   

清除不是数字js正则

let arr = '2.1.3ssa  阿松大'
console.log(arr.replace(/[^\d]/g, ""))

文本超出不换行，可滑动

 overflow-y: hidden;
 overflow-x: auto;
 white-space: nowrap;

文字左右偏移

transform:translateX(-10rpx) //负往左  正往右
text-indent: 22rpx;