那些不常用但很实用的css样式

1. 样式一键黑白,包含子元素所有图片文本等

.silent{
	filter: grayscale(100%);
	filter: gray;
}

2. :in-range 和 :out-of-range伪类

<!-- html部分  -->
<form>
    <label for="age">年龄</label>
    <input type="number" id="age" name="age" min="20" max="40" required>
</form>

/** 
 * css部分
 * /
input[type="number"]:in-range {
    background-color: blue;
}
input[type="number"]:out-of-range {
    background-color: red;
}

用户在输入框中输入的值在20~40之间，则背景颜色变为蓝色；如果不在这个范围内，则背景颜色变为红色。

3. 毛玻璃效果

/** 
 * 效果1
 * /
.glass {
    position: relative;
    overflow: hidden;
    &::before {
	    content: "";
	    position: absolute;
	    top: -5px;
	    left: -5px;
	    right: -5px;
	    bottom: -5px;
	    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(image.jpg);
	    filter: blur(5px);
	}
}


/** 
 * 效果2
 * /
.glass{
   -webkit-backdrop-filter: blur(6.2px);
   backdrop-filter: blur(6.2px);
   background: rgba(255, 255, 255, 0.4);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.24); 
}

4. 裁剪clip-path

.span{
  height: 200px;
  width: 200px;
  background-color: rgba(199, 62, 133, 0.9);
  clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
}

5.背景图像与背景颜色的混合模式(background-blend-mode)

 background-image: url("1.png"));
  background-blend-mode: color;