废话不多说，直接上代码，希望能帮到有需要的小伙伴
①：遮罩
position: fixed; ???background: rgba(0, 0, 0, .4); ???top: 0; ???left: 0; ???right: 0; ???bottom: 0; ???z-index: 99; ???width: 100%; ???height: 100%;
②：三角（下面三角的代码按照下图上右下左的顺序排列）
width: 0; ???height: 0; ???border-width: 8px; ???border-style: solid; ???border-color: transparent transparent #000 transparent;
width: 0; ??height: 0; ??border-width: 8px; ??border-style: solid; ??border-color: #000 transparent transparent transparent;
width: 0; ??height: 0; ??border-width: 8px; ??border-style: solid; ??border-color: transparent #000 transparent transparent;
width: 0; ??height: 0; ??border-width: 8px; ??border-style: solid; ??border-color: transparent #000 transparent transparent;
③：圆
??display: inline-block; ??width: 10px; ??height: 10px; ??border-radius: 50%; ??background-color: #f6ad03;
④：图标
width: 24px; ??box-shadow: 0 10px 0 2px #999, 0 20px 0 2px #999, 0 30px 0 2px #999;
⑤：超出隐藏
width: 180px； overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
6：垂直居中
position: fixed; ??top: 0; ??right: 0; ??bottom: 0; ??left: 0; ??margin: auto;
注：针对元素有固定宽高的情况
position: fixed; ???top: 50%; ???left: 50%; ???z-index: 999; ???transform: translate(-50%,-50%);
注：针对元素无固定宽高的情况
几个实用的CSS代码段总结
原文地址：https://www.cnblogs.com/tu-0718/p/10065896.html