我难以覆盖(或简单地删除)放置在文本上的 -webkit-filter drop-shadow
属性,您可以在下图中看到。我需要对话泡泡上的阴影,而不是泡泡下方的文本。我试过将阴影设置为白色,但这似乎没有效果。出于定位原因,我需要将文本保留为气泡的子元素。谁能告诉我如何才能达到预期的效果?
fiddle here .
HTML
<div class="bubble bubble-left">This is line 1 in speech bubble left.<br/>
This is line 2 in the bubble,<br/> and this is line 3.
<div class="title">Title for bubble</div>
</div>
CSS
.bubble {
background-color: #fff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius: 7px;
border: 3px solid #5E2750;
-webkit-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
-moz-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
-ms-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
-o-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5), 4px 4px 0 hsla(0,0%,0%,.2);
color: #333;
font-family: Ubuntu, sans-serif;
font: 16px/25px;
padding: 15px 25px;
position: absolute;
}
.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #fff;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
z-index: 1;
}
.bubble:before {
border-right: 27px solid #5E2750;
border-bottom: 27px solid transparent;
bottom: -29px;
right: 23px;
z-index: 0;
}
.bubble-left {left: 25%;}
.bubble-right {right: 25%;}
.title {
/* remove drop-shadow/filter effect */
-webkit-filter: drop-shadow(4px 4px 5px rgba(255,255,255,1)) !important;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
box-shadow: none;
color: #5E2750;
padding-left: 15px;
font-style:italic;
position: relative;
bottom: -43px;
left: 25%;
}
最佳答案
尝试将您的过滤器框阴影 CSS 属性更改为这种格式:
-webkit-drop-shadow: (4px 4px 5px rgba(0, 0, 0, 0.5));
-moz-drop-shadow: (4px 4px 5px rgba(0, 0, 0, 0.5));
-ms-drop-shadow: (4px 4px 5px rgba(0, 0, 0, 0.5));
-o-drop-shadow: (4px 4px 5px rgba(0, 0, 0, 0.5));
您可能需要根据自己的喜好调整框阴影值:
在这里 fiddle :jsFiddle
另一种方法是从气泡容器中取出气泡链接的标题,并将两者放在一个新的相关 div 中。不过,您必须对 CSS 进行一些更改。
<div class="wrap">
<div class="bubble bubble-left">This is line 1 in speech bubble left.
<br/>This is line 2 in the bubble,
<br/>and this is line 3.</div>
<div class="title">Title for bubble</div>
</div>
参见 fiddle :jsFiddle
关于html - Webkit 滤镜阴影去除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15923266/