CSS3 新样式

设置 input[type=text] 为隐藏状态，例如 password 切换

input {
  -webkit-text-security: disc; /*小圆点 Chrome有效*/
}
/**
* circle 小圆圈
* square 小方块
*/

禁止页面复制文字

div {
  user-select: none;
}

实现背景虚拟化

div {
  backdrop-filter: blur(10px);
}
/**
* 作用于顶层元素，可以让下面的元素呈现出背景虚化的效果
*/

实现 placeholder 换颜色

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

让物体有立体感的阴影样式

.box {
  box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
}

实心三角形

.box {
  height: 0px;
  width: 0px;
  border-left: 80px solid transparent;
  border-bottom: 100px solid black;
  border-right: 80px solid transparent;
}

实心气泡

.test {
  position: relative;
  width: 300px;
  background: #075698;
  border-radius: 10px;
}
.test:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  border-left: 10px solid transparent;
  border-top: 15px solid #075698;
  border-right: 10px solid transparent;
  bottom: -15px;
}