常见的CSS技巧

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 class="bruce" data-title="使用linear-gradient控制渐变背景"><div class="linear-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 class="bruce flex-ct-x" data-title="使用linear-gradient控制渐变文本"><h1 class="linear-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度旋转}
}