web前端常用代码

文字两端对齐

.text-justify{
    width: 100px;
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
}

超出一行用...代替

.oneline{
    display: block;    /*设置为flex ...不生效*/
    width: 100px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

超出三行用...代替

.mutiline{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

html5禁止页面缩放

颜色翻转：

filter: invert(100%);

阿拉伯语页面翻转：

direction: rtl;

灰度网站：

filter: grayscale(100%);

H5 ios点击出现背景色

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

H5 禁止选中

html {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

H5 ios双击滚动

table合并边框

border-collapse:collapse;

圆角部分overflow:hidden失效

transform: rotate(0deg);

新手机号正则表达式

/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[189])\d{8}$/

平滑滚动

html,body{
    height: 100%;
    scroll-behavior: smooth;
}

粘性定位

position: sticky;
top: 0;
left: 0

video隐藏全屏按钮

video::-webkit-media-controls-fullscreen-button {
    display: none;
}

隐藏滚动条

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

自定义滚动条滑块

::-webkit-scrollbar-thumb {
    width: 10rpx;
    border-radius: 10rpx;
    background-color: #CBCBCB;
}

蒙层

.mask-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
}

渐变背景+渐变边框+圆角

border-radius: .36rem;
border: .06rem solid transparent;
background-clip: padding-box,border-box;
background-origin: padding-box,border-box;
background-image: linear-gradient(#fff,#fff),linear-gradient(#FFDB60,#FFEBB8,#FFBF36);