web前端常用代码

冷不防 2022-05-16 11:24 279阅读 0赞

文字两端对齐

.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);

去除全部空格

str.replace(/\s+/g, "");