收藏几个常用的css代码块

点击穿透

若元素被类似的渐变div遮盖，但又想可被点击，则在 遮盖的div上增加css pointer-events: none;// 点击可穿透

最细边框

• 上下边框

  .border(@t:1px, @b:1px, @color:#dcdcdc) {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    display: block;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform: scale(0.5);
    transform-origin: 0 0;
    box-sizing: border-box;
    border-top-color: @color;
    border-bottom-color: @color;
    border-top-width: @t;
    border-bottom-width: @b;
    border-style: solid;
    border-left: none;
        border-right: none;
        pointer-events: none;
  }
  }
  
  //使用
  .border(@t:1px, @b:0, @color:#DCDCDC);
  

• 全边框

  border:1px solid #19C5B9;
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    border: 0.5px solid #19C5B9;
  }
  

最新边框2

 .border_1px:before{
          content: '';
          position: absolute;
          top: 0;
          height: 1px;
          width: 100%;
          background-color: #000;
          transform-origin: 50% 0%;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px:before{
                transform: scaleY(0.5);
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .border_1px:before{
                transform: scaleY(0.33);
            }
        }

文字底部对齐

line-height文字上浮问题

去过是span取消搞定,display:inline-block

.c-i-tag{
margin-top:10px;
position: absolute;
height: 21px; // 标签超出隐藏
overflow: hidden;
span{
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left:5px;
    padding-left: 5px;
    padding-right: 5px;
    font-size:10px;
    color: #23BEAE;
    border:1px solid #19C5B9;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        border: 0.5px solid #19C5B9;
    }
    border-radius: 1px;
    &:first-child{
        color: #FE6F21;
        border:1px solid #F08724;
        margin-left:0 ;
        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            border: 0.5px solid #F08724;
        }
    }
    &:last-child{
        color: #3FADF5;
        border:1px solid #42AEE4;
        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            border: 0.5px solid #42AEE4;
        }
    }
}

}

禁止文字选中

*:not(#addresstextarea):not(input,textarea) {
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(255,0,0,0);
}