使文本风格化的最佳效果之一是使其看起来模糊。
在这个片段中，我们将展示两种创建模糊文本的方法。
所以我们开始了。
使用 CSS text-shadow 属性的解决方案
创建模糊文本的第一种方法是使文本透明并对其应用阴影。
阴影会使文本显得模糊。
使用 ID 为“blur”的 <div>。
然后，将颜色属性设置为其“透明”值并定义 text-shadow 属性为文本提供阴影。
使用 text-shadow 属性创建模糊文本的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#blur {
font-size: 40px;
color: transparent;
text-shadow: 0 0 8px #000;
}
</style>
</head>
<body>
<div id="blur">Blurry Text</div>
</body>
</html>
如果我们希望文本看起来或者多或者少模糊，我们可以根据文本的大小更改 text-shadow 属性的模糊半径值。
该方法在不支持 text-shadow 属性的浏览器中不起作用。
使用 CSS filter 属性的解决方案
另一种方法是使用 CSS filter 属性及其“blur”值。
值越大，文本越模糊。
使用 filter 属性创建模糊文本的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#blur {
font-size: 40px;
filter: blur(3px);
-webkit-filter: blur(3px);
}
</style>
</head>
<body>
<div id="blur">Blurry Text</div>
</body>
</html>
我们可以尝试不同的模糊效果，例如，我们可以使文本的某些字母模糊，而其他字母则不模糊。
在这种情况下，每个字母都必须包含在 <span> 中，以便可以分别为每个 <span> 定义模糊效果和字体大小。
创建具有某些效果的模糊文本的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#blur {
display: inline-block;
padding: 20px 30px;
margin: 20px auto;
letter-spacing: 2px;
background-color: #000;
}
#blur span:nth-child(1) {
color: transparent;
text-shadow: 0 0 0 #fff;
font-size: 32px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(2) {
color: transparent;
text-shadow: 0 0 2px #fff;
font-size: 35px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(3) {
color: transparent;
text-shadow: 0 0 2px #fff;
font-size: 33px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(4) {
color: transparent;
text-shadow: 0 0 4px #fff;
font-size: 34px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(5) {
color: transparent;
text-shadow: 0 0 6px #fff;
font-size: 41px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(6) {
color: transparent;
text-shadow: 0 0 10px #fff;
font-size: 40px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(7) {
color: transparent;
text-shadow: 0 0 8px #fff;
font-size: 36px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(8) {
color: transparent;
text-shadow: 0 0 6px #fff;
font-size: 38px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(9) {
color: transparent;
text-shadow: 0 0 4px #fff;
font-size: 36px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(10) {
color: transparent;
text-shadow: 0 0 2px #fff;
font-size: 34px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(11) {
color: transparent;
text-shadow: 0 0 0 #fff;
font-size: 32px;
font-family: 'Carme', sans-serif;
}
</style>
</head>
<body>
<div id="blur">
<span>B</span>
<span>L</span>
<span>U</span>
<span>R</span>
<span>R</span>
<span>E</span>
<span>D</span>
<span>T</span>
<span>E</span>
<span>X</span>
<span>T</span>
</div>
</body>
</html>
在上面的代码中，<div> 的每个字母都充当一个 <span>。
我们使用 :nth-child() 选择器来选择第 n 个 span 元素。
日期：2020-06-02 22:15:01 来源：oir作者：oir