删除CSS"过滤器：模糊"效果 - 不起作用

Question

有没有人知道如何将filter：blur应用于"文本A，B，C等"行，但保持列表编号(1,2,3 - 圆圈(不模糊？

首先，我尝试执行以下操作(请参阅下面的示例代码(：

我添加了过滤器：blur(9px(;到.meaning类(负责文本和数字(，我把所有东西都模糊了(见截图(。然后我试图通过将filter： blur(0(添加到.ol.circle> li：before 类来中和列表编号中的模糊(作为一个"：before"伪类负责位于文本之前的列表编号(。没有结果 - 数字保持模糊。

然后我从类中删除了模糊，并决定尝试通过HTML部分解决问题。所以我直接将模糊插入带有文本的行：

<li style="padding-left:1em;filter: blur(9px)">Text A</li>

这再次模糊了文本及其列表编号。我不知所措...:-(

JSFiddle的代码：干净 - 无模糊

.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
font-size: 20px;
font-weight: 600;
filter: blur(9px);
}
ol.circle > li:before {
margin-right: 1em;
margin-left: -2.77em;
content: counter(item);
background: #1f2c60;
border-radius: 100%;
color: white;
width: 1.7em;
text-align: center;
display: inline-block;
filter: blur(0);
}

解决！请参阅布里利安德的评论。这正是我想要的。谢谢！

Answer 1

模糊滤镜会模糊您应用它的整个元素。 它不是继承的属性，因此无法为特定子元素重写它;您只需要将其应用于正确的事情。

li元素的结构如下所示：

<li style="padding-left:1em">
::before
"Text A"
</li>

(复制自Chrome的开发工具(

如何将样式仅应用于该结构的文本部分，而不包括 ：：before？ 你。。。不能。 不是那种结构。 但是，如果您将结构更改为以下内容：

<li style="padding-left:1em">
::before
<span class="blur-this">Text A</span>
</li>

现在，您可以仅针对模糊范围：

.blur-this {
filter: blur(9px);
}

Answer 2

尝试添加此 css：

text-shadow: none;

这里(最后一项(这样，数字就不会有文本阴影效果。和文本 ->文本 A...B...会继续模糊

.meanings_and_examples {
display: flex;
flex-direction: column;  
}
ol.circle {
list-style-type: none;
}
ol.circle > li {
counter-increment: item;
margin-bottom: 2px;
}
ol.circle > li:before {
margin-right: 1em;
margin-left: -2.77em;
content: counter(item);
background: #1f2c60;
border-radius: 100%;
color: white;
width: 1.7em;
text-align: center;
display: inline-block; 
text-shadow: none;/*add this*/
}
ul {
list-style-type: none;
padding: 0;
padding-bottom: 10px;
padding-left: 1em;
}
li {
line-height: 1.6;  
}
.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
font-size: 20px;
font-weight: 600;
}
.example {
width: auto;
text-align: left;
font-style: italic;
font-weight: 400;
}

<div class="meanings_and_examples">
<div class="meaning">
<ol class="circle">
<li style="padding-left:1em">Text A</li>
<div class="example">
<ul>
<li>Text B</li>     
</ul>
</div>
<li style="padding-left:1em">Text C</li>
<div class="example">
<ul>
<li>Text D</li>     
</ul>
</div>
<li style="padding-left:1em">Text E</li>              
<div class="example">
<ul>
<li>Text F</li>
</ul>
</div>
</ol>
</div>
</div>