网站建设支付方式,mooc网站开发流程图,个性化网站制作,ps做简洁大气网站1.禁止长按图片弹出菜单
img {-webkit-touch-callout: none; // 主要用于禁止长按菜单。主针对webkit内核的浏览器#xff1b;
}
/*或者 user-select , 是css3的新属性#xff0c;用于设置用户是否能够选中文本*/
.img {-webkit-user-select: none;-khtml-user-select: none…1.禁止长按图片弹出菜单
img {-webkit-touch-callout: none; // 主要用于禁止长按菜单。主针对webkit内核的浏览器
}
/*或者 user-select , 是css3的新属性用于设置用户是否能够选中文本*/
.img {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}2.CSS之实现小于12px的字体
利用css3的缩放,实现10px的字体或图标
.smallFont{ font-size:12px; transform: scale(0.833333);-webkit-transform: scale(0.833333); // 利用css3的缩放调整系数,实现10px的字体或图标-webkit-transform-origin-x: 0; // 缩放位置transform-origin: center center; // 保持居中-webkit-transform-origin: center center;
}3.文字溢出隐藏并显示省略号–CSS省略号
单行文本文字超出隐藏并显示省略号
.box {white-space: nowrap;text-overflow:ellipsis;overflow:hidden;
}多行文本(展示2行)文字超出隐藏并显示省略号
.box {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;
}如果使用SCSS 或Less
/**CSS省略号-- 默认一行可根据传递的参数设置展示几行参数: {Param} Number用例--超出两行使用省略号: include ellipsis(2);
*/
mixin ellipsis($lineClamp: 1) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: $lineClamp;line-clamp: $lineClamp;-webkit-box-orient: vertical;
}
4.CSS使用::-webkit-scrollbar设置滚动条样式
修改某个容器的滚动条样式
.scrollDom::-webkit-scrollbar {width: 6px; // y轴height: 6px; // x轴
}
.scrollDom::-webkit-scrollbar-track {background-color: #f0f0f0;
}
.scrollDom::-webkit-scrollbar-thumb {border-radius: 3px;background-color: rgb(178, 178, 186);
}全局修改滚动条样式在全局样式表中添加以下内容
::-webkit-scrollbar {width: 6px; // y轴height: 6px; // x轴
}
::-webkit-scrollbar-track {background-color: #f0f0f0;
}
::-webkit-scrollbar-thumb {border-radius: 3px;background-color: rgb(178, 178, 186);
}5.阿拉伯语布局
阿拉伯人的阅读习惯是从右往左通过以下设置即可实现
.Arabic_css {direction: rtl;unicode-bidi: bidi-override;
}6.使用 linear-gradient 控制渐变背景或文本
6.1.使用 linear-gradient() 控制渐变背景
div classbruce data-title使用linear-gradient控制渐变背景div classlinear-gradient渐变背景/div
/div.linear-gradient{display: flex;justify-content: center;align-items: center;color: #fff;font-size: 80px;font-weight: bold;height: 100%;background: linear-gradient(90deg, #09f, #66f,#f66, #f90, #3c9) left center/400% 400%;animation: animate 6s infinite;
}
keyframes animate {0%,100% {background-position-x: left;}50% {background-position-x: right;}
}
6.2.使用 linear-gradient() 控制渐变文本
div classbruce flex-ct-x data-title使用linear-gradient控制渐变文本h1 classlinear-gradient使用linear-gradient控制渐变文本/h1
/div
.linear-gradient{background-image: linear-gradient(90deg, #f90, #3c9);background-clip: text;line-height: 80px;font-size: 60px;color: transparent;animation: hueRotate 5s linear infinite;
}
keyframes hueRotate {from {filter: hue-rotate(0);}to {// hue-rotate滤镜除了支持deg还支持其它CSS3单位比如圈数turn、弧度rad等filter: hue-rotate(360deg); // 360度旋转}
}
