1、网页灰度效果

适用于公祭日等需要网站全屏灰的效果

.day-gray {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

2、css 中 table 细边框样式

第一种：最常见的细边框，这种是有缺陷的，页面放大细线就不一样了，对页面有显示要求不要用了。

table {
  border-collapse: collapse;
  td {
    border: 1px solid #000;
  }
}

第二种：需要在<table border="0" cellpadding="0" cellspacing="1">加入，也可以在样式中加入border-spacing: 1px;，这种放大后也不会细边框错乱。

table {
  background-color: #000;
  /* border-spacing: 1px; */
  th,
  td {
    background-color: #fff;
  }
}

第三种：这种通过 border 设置，页面放大后细边框也不会错乱。

table {
  border-spacing: 0;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  th,
  td {
    border: 1px solid #000;
    border-top: none;
    border-left: none;
    text-align: center;
  }
}

3、css 伪类实现 tooltip 上下左右小三角

tooltip 小三角代码结构

<!-- 上 -->
<div class="tooltip" placement="top">
  <div class="arrow"></div>
  <div class="content">小三角在上边</div>
</div>
<!-- 右 -->
<div class="tooltip" placement="right">
  <div class="arrow"></div>
  <div class="content">小三角在右边</div>
</div>
<!-- 下 -->
<div class="tooltip" placement="bottom">
  <div class="arrow"></div>
  <div class="content">小三角在下边</div>
</div>
<!-- 左 -->
<div class="tooltip" placement="left">
  <div class="arrow"></div>
  <div class="content">小三角在左边</div>
</div>

对应的 css 样式

.tooltip {
  position: relative;
  width: 200px;
  height: 50px;
  margin: 50px;
  padding: 8px;
  border: solid 1px #2d8cf0;
}

/* 上 */
.tooltip[placement="top"] .arrow {
  position: absolute;
  top: -6px;
  left: 40px;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  border-top-width: 0;
  border-bottom-color: #2d8cf0;
}
.tooltip[placement="top"] .arrow::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  border-top-width: 0;
  border-bottom-color: #fff;
}

/* 右 */
.tooltip[placement="right"] .arrow {
  position: absolute;
  top: 10px;
  right: -6px;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  border-right-width: 0;
  border-left-color: #2d8cf0;
}
.tooltip[placement="right"] .arrow::after {
  content: "";
  position: absolute;
  right: 1px;
  width: 0;
  height: 0;
  margin-top: -6px;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  border-right-width: 0;
  border-left-color: #fff;
}

/* 下 */
.tooltip[placement="bottom"] .arrow {
  position: absolute;
  bottom: -6px;
  left: 40px;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  border-bottom-width: 0;
  border-top-color: #2d8cf0;
}
.tooltip[placement="bottom"] .arrow::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  border-bottom-width: 0;
  border-top-color: #fff;
}

/* 左 */
.tooltip[placement="left"] .arrow {
  position: absolute;
  top: 10px;
  left: -6px;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  border-left-width: 0;
  border-right-color: #2d8cf0;
}
.tooltip[placement="left"] .arrow::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 0;
  height: 0;
  margin-top: -6px;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  border-left-width: 0;
  border-right-color: #fff;
}

4、解决IOS滚动条卡顿

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

5、带hover和聚焦的滚动条样式

/*
 * 滚动条的样式
 */
::-webkit-scrollbar {
  width: 14px;
  height: 16px;
}
// 滚动条内部条样式
::-webkit-scrollbar-thumb {
  border-radius: 20px;
  border: solid 4px transparent;
  background-clip: padding-box;
  background-color: rgba(81, 90, 110, 0.3);
}
// 滚动条内部条hover样式
::-webkit-scrollbar-thumb:hover {
  border-color: #ebecf1;
  background-color: rgba(81, 90, 110, 0.4);
}
// 滚动条内部条点击样式
::-webkit-scrollbar-thumb:active {
  background-color: rgba(81, 90, 110, 0.6);
}