文字两端对齐
.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禁止页面缩放
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
颜色翻转:
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双击滚动
<script>
var agent = navigator.userAgent.toLowerCase(); //检测是否是ios
var iLastTouch = null; //缓存上一次tap的时间
if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {
document.body.addEventListener('touchend', function (event) {
var iNow = new Date().getTime();
iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
var delta = iNow - iLastTouch;
if (delta < 500 && delta > 0) {
event.preventDefault();
return false;
}
iLastTouch = iNow;
}, false);
}
</script>
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, "");
更多推荐
web前端常用代码
发布评论