实用css样式汇总（持续更新）

1、禁止一个容器上所有的鼠标事件

例如我们不想删除事件重新注册事件的时候很有用；

.box{
    pointer-events: none;
}

2、禁止用户选择某个容器下的文本；

.box{
    user-select: none;
}

3、设置非absolute的元素的z-index

如果相同父容器下面还有absolute的元素，可以设置比较大的z-index，放在absolute上层展示；

.box{
    position: relative;
    z-index: 10;
}

4、设置高度是屏幕高度为全屏

之前都是通过height:100%从上往下元素都写上，可以使用下面的方法；

.box{
    height: 100vh;
}

vh是新的单位，就是将屏幕的高度拆分100份，1vh代表1/100窗口高度。

5、使用两个图片做背景图

可以单独设置两个背景图的大小和位置，重复方式。

.box{
  background: url(../images/bg2.png) no-repeat bottom, url(../images/bg1.png) no-repeat top;
  background-size: 320px auto;
}

6、修改输入框placeholder的样式和光标样式

注意所有的前缀都需要写上，要不然怕不会生效；

input {
  color: #435d57;
  caret-color: #42E9C6;
}

input::-ms-input-placeholder {
    color: #fff;
}

input::-webkit-input-placeholder {
    color: #fff;
}

input::-moz-input-placeholder {
    color: #fff;
}

/* --- 后续更新 https://blog.csdn.net/q5706503/article/details/82826901 --- */
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    red;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:   red;
}
input::-ms-input-placeholder { /* Microsoft Edge */
   color:    red;
}

7、实用nth-child选中前面n个元素并设置样式

例如展示进度条的当前进度等；

/* 选中了前三个元素并且设置背景色为绿色 */
:nth-child(-n+3){
  background-color: green;
}

8、文本超出使用 …；

/* 单行超出... */
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
/* 多行超出... */
.ellipsis {
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}

9、如何去掉 chrome input 的背景黄色；

/* 方案1 */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;
}

/* 方案2 */
input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

@-webkit-keyframes autofill {
  to {
    color: #fff;
    background: transparent;
  }
}

10、css3 画小箭头；

/* 第一种实现：其一，通过 border 来实现 */
/*箭头向上*/
.arrow-up {
  width:0;
  height:0;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
  border-bottom:30px solid #fff;
}
/*箭头向下*/
.arrow-down {
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid #0066cc;
}

/* 其二，拼凑法（伪类或元素），将 div 隐藏两边或设置 z-index，然后旋转，放到合适位置。 */
div {
  position: absolute;
  bottom: -2px;
  left: 7px;
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  z-index: -1; /* 放在容器后，被遮盖住*/
}

11、支持局部滚动弹性滚动，在ios上可以增强滚动的流畅度

body {
    -webkit-overflow-scrolling: touch;
}

12、禁止滚动传播；滚动穿透？

.elem {
    overscroll-behavior: contain;
}

13、移动端点击触摸元素会出现半透明灰色遮罩，不想要！

* {
    -webkit-tap-highlight-color: transparent;
}

14、实现字体渐变颜色

注意：在iOS低版本上不支持会导致字体不展示，需要做好降级方案

.text {
    background: linear-gradient(45deg, #fe3849 30%, #ec3682 60%);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;
}

15、一个有条纹的并且动态的进度条

https://getbootstrap.com/docs/5.0/components/progress/

.striped {
  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size: 1rem 1rem;
  // 显示动画
  animation: 1s linear infinite progress-bar-stripes;
}
// 显示动画
@keyframes progress-bar-stripes {
  0% { background-position-x: @progress-height; }
}

16、生成一个3/4圆形的加载动画（设置一个边的边框为透明）

.spinner{
  width: 2rem;
  height: 2rem;
  border: .25em solid #ccc;
  border-right-color: transparent;
  border-radius: 50%;
  animation: .75s linear infinite spinner-border;
}

17、自定义字体优化加载顺序；swap是一个比较好的选择

@font-face {
  font-family: "OPPOSans-M";
  font-display: swap;
  src: url("https://fxd-cdn.codoon.com/static/20210825/OPPOSans-M.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

18、移动端overflow:auto有滚动条之后字体变大

参考链接：https://segmentfault.com/q/1010000009170648

body * {
  max-height: 999999px;
}

19、iconfont在chrome中出现锯齿或加粗处理

使用阿里的iconfont在chrome中出现了毛边锯齿的问题，解决方案：

/*这个值的大小可以在浏览器中调整查看结果*/
.iconfont{
  /* 指定了文本的笔触宽度：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-text-stroke-width */
  -webkit-text-stroke-width:2px;
  /*加粗的情况可以使用下面的代码处理，iconfont已经处理了*/
  -webkit-font-smoothing: antialiased;
}

20、less循环生成有规律的样式

通过progress${num}类控制子元素的表现形态。

需要实现的进度条各个状态的样式；相当于实现了一个递归；

.loop(@counter) when (@counter > 0) {
  .loop(@counter - 1);
  .progress@{counter} .bar {
    background-image: url("../../../assets/images/step3-bar-@{counter}.png")
  }
}

.loop(10);

生成的css文件

.sport-shoes .progress0 .bar {
  background-image: url("../../../assets/images/step3-bar-0.png")
}

.sport-shoes .progress1 .bar {
  background-image: url("../../../assets/images/step3-bar-1.png")
}

.sport-shoes .progress2 .bar {
  background-image: url("../../../assets/images/step3-bar-2.png")
}

.sport-shoes .progress3 .bar {
  background-image: url("../../../assets/images/step3-bar-3.png")
}

.sport-shoes .progress4 .bar {
  background-image: url("../../../assets/images/step3-bar-4.png")
}

.sport-shoes .progress5 .bar {
  background-image: url("../../../assets/images/step3-bar-5.png")
}

.sport-shoes .progress6 .bar {
  background-image: url("../../../assets/images/step3-bar-6.png")
}

.sport-shoes .progress7 .bar {
  background-image: url("../../../assets/images/step3-bar-7.png")
}

.sport-shoes .progress8 .bar {
  background-image: url("../../../assets/images/step3-bar-8.png")
}

.sport-shoes .progress9 .bar {
  background-image: url("../../../assets/images/step3-bar-9.png")
}

.sport-shoes .progress10 .bar {
  background-image: url("../../../assets/images/step3-bar-10.png")
}

21、实现毛玻璃效果，MDN链接，需要设置一个透明度的背景颜色

.box {
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(50%) blur(8px);
}

22、css实现select中的内容右对齐

input是可以通过text-align: right;来设置的，但是select上无效

select {
    direction: rtl;
}

参考

• https://libin1991.github.io/2019/01/02/JS实现多行溢出省略号思路/
• https://getbootstrap.com/docs/5.0/components/progress/
• https://segmentfault.com/q/1010000009170648