filter是css中的一个属性，具体值有（常用的）：
blur(px)调整元素模糊度
brightness（%）图片亮度，为0时全黑
contrast(%) 调整图片的对比度
grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化
hue-rotate(deg)给图像应用色相旋转
invert(%)反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化
saturate(%)转换图像饱和度
sepia(%)将图像转换为深褐色
实例1：镂空的字体
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 100vh;background: linear-gradient(30deg, rgb(13, 235, 235), rgb(17, 235, 13));display: flex;justify-content: center;flex-direction: column;align-items: center;}.text {font-size: 20vh;text-align: center;font-weight: 600;/* color: aqua; *//* 透明色 */color: transparent;/* box-shadow: ; *//* text-shadow: 7px 0 black, 7px 7px black, 0 7px black, -7px 7px black, -7px 0 black, -7px -7px black, 0 -7px black, 7px -7px black; */-webkit-text-stroke: 5px black;}</style>
</head><body><div class="text">APEXXXXXX</div>
</body></html>效果如下：
实例2：字体阴影
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 100vh;background: linear-gradient(30deg, rgb(13, 235, 235), rgb(17, 235, 13));/* background: linear-gradient(30deg, #9b59b6, #2c3e50); */display: flex;justify-content: center;flex-direction: column;align-items: center;}.text {font-size: 20vh;text-align: center;font-weight: 600;color: aqua;/* color: #f1c40f; */position: relative;}.text::after {content: "APEXXXXX";/* content: "CSGOCSGO"; */color: black;position: absolute;left: 0;top: 0px;transform: skew(50deg) scaleY(0.5) translate(-68px, 57px);z-index: -1;-webkit-mask-image: linear-gradient(transparent, black)}</style>
</head><body><div class="text">APEXXXXX</div>
</body></html>效果如下：
