常用的css样式

一、去除input默认样式

textarea,select,input{
            -webkit-appearance: none; 
            -moz-appearance: none; 
            -o-appearance: none; 
            appearance: none;
            outline: none;
            border-color:transparent;
            background-color:transparent;
        }

二、让select文字居右

select {
    direction: rtl;   //select文字和option都往右
}
select option {
    direction: ltr;  //option往左
}

三、换行与不换行

//强制不换行
div{
   white-space:nowrap;
}
//自动换行   你真的了解word-wrap和word-break的区别吗？
div{ 
  word-wrap: break-word; //                            
  word-break: normal; //word-break 属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)
}
强制英文单词断行
div{
  word-break:break-all;
}

四、多颜色渐变

background: linear-gradient( 
            to right, 
            rgba(153,157,194,0.5) 0%, 
            rgba(164,160,211,0.3) 10%, 
            rgba(164,160,211,0.4) 20%, 
            rgba(137,130,177,0.6) 30%, 
            rgba(158,138,202,0.8) 40%, 
            rgba(158,138,202,1) 50%,
            rgba(158,138,202,0.8) 60%, 
            rgba(122,142,209,0.6) 70%, 
            rgba(164,160,211,0.4) 80%, 
            rgba(164,160,211,0.3) 90%,
            rgba(153,157,194,0.5) 100%)
        }

如何用css做一个正方形（自适应屏幕宽度）
box-shadow 单边阴影 双边阴影
透明度 opacity rgba(red, green, blue, alpha) filter:Alpha(opacity=x)

五、pointer-events:none；

除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

意思就是，加了这个属性之后，不会触发dom事件，就像一个幽灵，鼠标点击，拖动等等，都是穿透这个元素的。

六、小图标与文字对齐

<div class="shop_name_boxs">
                <div class="right">
                    <img class="img_box_shop" src="../../image/myOrder/detail_shop_icon.png" alt="">
                    <span class="name">{{orderDetailData.shop_name}}</span>
                </div>
            </div>

.shop_name_boxs{width:100%;height:0.77rem;display:flex;align-items:center;border-bottom:0.01rem solid #e5e5e5;box-sizing:border-box;padding:0.2rem;}
.shop_name_boxs .right{height:100%;line-height:0.37rem;}
.shop_name_boxs .right .img_box_shop{display:inline-block;width:0.35rem;height:0.28rem;margin-right:0.15rem;vertical-align:middle;margin-top:-0.02rem;}
.shop_name_boxs .name{display:inline-block;height:0.28rem;line-height:0.28rem;font-size:0.28rem;color:#333;vertical-align:middle;}

七、overflow:auto;增加的滚动条在ios上不流畅

overflow:auto; -webkit-overflow-scrolling:touch;

如果一个页面中有多个overflow:auto;可能会影响绝对定位（absolute、fixed）随页面一起滚动

八、pc 双击禁止选中文字

onselectstart='return false'

九、多行省略

overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

十、ios长按文字或按钮会出现阴影

*{-webkit-tap-highlight-color: transparent;}

十一、首行缩进

text-indent:2em;

十二、给文字加下划线

text-decoration:underline;
//none:默认。定义标准的文本。
//overline:定义文本上的一条线
//line-through:定义穿过文本下的一条线。
//blink:定义闪烁的文本
//inherit:规定应该从父元素继承 text-decoration 属性的值。

十三、width:fit-content
如果不设置宽度还想用margin:auto居中，就要用到这个属性

ul{
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;
}

十四 滚动轴样式

/*局部滚动条样式设置*/
.scllbg{scrollbar-face-color:#ffffff; /*面子*/
    scrollbar-arrow-color:#ffffff; /*箭头*/
    scrollbar-3dlight-color:#ffffff; /*最外左*/
    scrollbar-highlight-color:#ffffff; /*左二*/
    scrollbar-shadow-color:#ffffff; /*右二*/
    scrollbar-darkshadow-color:#ffffff; /*右一*/
    scrollbar-track-color:#ffffff; /*滑道*/
}
/*滚动条整体*/
.scllbg::-webkit-scrollbar{  width:5px; /*滚动条宽度*/height:6px; /*滚动条高度*/ }
/*滚动条按钮*/
.scllbg::-webkit-scrollbar-button { }
.scllbg::-webkit-scrollbar-track{background-color:#ffffff;  /*滑道全部*/}
.scllbg::-webkit-scrollbar-track-piece{background-color:#ffffff;  /*滑道*/  -webkit-border-radius:2px; /*滑道圆角宽度*/ }
.scllbg::-webkit-scrollbar-thumb{background-color:#9f9f9f; /*滑动条表面*/border:solid 1px #9f9f9f; /*滑动条边框*/ border-radius:4px;  /*滑动条圆角宽度*/ }
/*横竖滚动条交角*/
.scllbg::-webkit-scrollbar-corner {background-color: #9f9f9f;}
/*横竖滚动条交角图案*/
.scllbg::-webkit-resizer {background-repeat: no-repeat;background-position: bottom right;}
/*鼠标滑过滑动条*/
.scllbg::-webkit-scrollbar-thumb:hover{background-color:#9f9f9f;}

十五、placehold

::-webkit-input-placeholder{text-align: center;color:#999;font-size:16px;}    /* 使用webkit内核的浏览器 */ 
:-moz-placeholder{text-align: center;color:#999;font-size:16px;}                  /* Firefox版本4-18 */
::-moz-placeholder{text-align: center;color:#999;font-size:16px;}                  /* Firefox版本19+ */
:-ms-input-placeholder{text-align: center;color:#999;font-size:16px;}           /* IE浏览器 */