filter是css中的一个属性,具体值有(常用的):
blur(px)调整元素模糊度
brightness(%)图片亮度,为0时全黑
contrast(%) 调整图片的对比度
grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化
hue-rotate(deg)给图像应用色相旋转
invert(%)反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化
saturate(%)转换图像饱和度
sepia(%)将图像转换为深褐色
实例1:镂空的字体
html
<!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:字体阴影
html
<!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>
效果如下: