Javascript CSS过滤器模糊0影响框阴影不显示

我有一个框，悬停时缩放到1.1x，但由于文本变得模糊，我使用了

filter:blur（0）

，解决了这个问题（仅适用于FireFox）。通过在父元素上使用

filter:blur（0）

，子元素上的

box shadow

属性停止工作

我尝试使用before和after伪元素，但也不起作用。我能做些什么来解决我的问题吗

函数myFunction（e）{
如果（e.style.transform==“旋转（180度）”）e.style.transform=“旋转（0）”；
else e.style.transform=“旋转（180度）”；
}

body{背景：mistyrose；填充：50px；}
r_卡{
高度：250px；
宽度：250px；
透视图：500px；
转变：转变0.25s；
过滤器：模糊（0）；
}
.r_卡：悬停{
-webkit转换：比例（1.1）；
转换：比例（1.1）；
背面可见性：隐藏；
-webkit背面可见性：隐藏；
}
.r_卡内{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
过渡：所有。2放松；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
}
.r_卡-内部.r_卡-头h3{
字号：26px；
}
.r_卡-内部.r_卡-标题p{
边际：13px0；
}
.r_卡-内部。r_卡-说明{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.r_卡-内部。r_卡-说明p{
利润率：15px0；
}
.r_卡：悬停.r_卡-内部{
盒影：2PX2PX1PX-3px黑色；
}
.r_卡正面，
.r_卡背面{
背景：#ffffff；
文本对齐：居中；
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
填充：10px 30px 30px；
边框底部：5px实心#E66343；
}
.r_卡正面{
颜色：黑色；
变换：旋转（0度）；
}
.r_卡前端。r_卡链接{
显示器：flex；
证明内容：周围的空间；
边缘顶部：5px；
字号：600；
字体大小：15px；
}
.r_卡-正面。r_卡-链接a{
光标：指针；
填充：6px 10px；
颜色：#ffffff；
边界半径：2px；
背景#E66343；
}
.r_卡背面{
变换：旋转（180度）；
}
r_card3先生{
显示：网格；
网格模板：重复（3，1fr）/自动；
}

标准
标准

>
p标签



彼得
艺术

分机

添加

到你的卡上。这样，可以在元素周围同时使用模糊和阴影

函数myFunction（e）{
如果（e.style.transform==“旋转（180度）”）e.style.transform=“旋转（0）”；
else e.style.transform=“旋转（180度）”；
}

body{背景：mistyrose；填充：50px；}
r_卡{
高度：250px；
宽度：250px；
透视图：500px；
转变：转变0.25s；
过滤器：模糊（0）；
}
.r_卡：悬停{
-webkit转换：比例（1.1）；
转换：比例（1.1）；
背面可见性：隐藏；
-webkit背面可见性：隐藏；
}
.r_卡内{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
过渡：所有。2放松；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
}
.r_卡-内部.r_卡-头h3{
字号：26px；
}
.r_卡-内部.r_卡-标题p{
边际：13px0；
}
.r_卡-内部。r_卡-说明{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.r_卡-内部。r_卡-说明p{
利润率：15px0；
}
.r_卡：悬停.r_卡-内部{
盒影：2PX2PX1PX-3px黑色；
}
.r_卡正面，
.r_卡背面{
背景：#ffffff；
文本对齐：居中；
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
填充：10px 30px 30px；
边框底部：5px实心#E66343；
}
.r_卡正面{
颜色：黑色；
变换：旋转（0度）；
滤镜：投影（1px10px 4px#696982）；
}
.r_卡前端。r_卡链接{
显示器：flex；
证明内容：周围的空间；
边缘顶部：5px；
字号：600；
字体大小：15px；
}
.r_卡-正面。r_卡-链接a{
光标：指针；
填充：6px 10px；
颜色：#ffffff；
边界半径：2px；
背景#E66343；
}
.r_卡背面{
变换：旋转（180度）；
}
r_card3先生{
显示：网格；
网格模板：重复（3，1fr）/自动；
}

标准
标准

>
p标签



彼得
艺术

分机

filter: drop-shadow(1px 10px 4px #696982);