CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)
是否可以使用CSS3在一个p-tag上应用两个文字阴影？ 我想用1像素边框创建一个非常浅的黑色背景。
像这样的东西：
text-shadow: 0 0 55px black; (very light black background to increase white text readabilitiy)
&
text-shadow: 0 1px 0 rgba(0,0,0, .25); (one pixel black drop shadow)
Is it possible to apply two text-shadows on one p-tag with CSS3? I want to create a very light black background with a 1 pixel border.
Something like this:
text-shadow: 0 0 55px black; (very light black background to increase white text readabilitiy)
&
text-shadow: 0 1px 0 rgba(0,0,0, .25); (one pixel black drop shadow)
原文：https://stackoverflow.com/questions/22168506
更新时间：2020-11-02 10:11
最满意答案
你可以简单地用逗号分隔阴影：
text-shadow: 0 0 55px black, 0 1px 0 rgba(0,0,0, .25);
您可能需要查看MDN上的这篇文章以获取更多信息。
文本阴影CSS属性为文本添加阴影。 它接受逗号分隔的阴影列表，以应用于元素的文本和文本装饰。
每个阴影都指定为与文本的偏移量，以及可选的颜色和模糊半径值。 多个阴影是从前到后应用的，第一个指定的阴影在顶部。
You can simply seperate the shadows with a comma:
text-shadow: 0 0 55px black, 0 1px 0 rgba(0,0,0, .25);
You may want to have a look at this article on MDN for further information.
The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and text-decorations of the element.
Each shadow is specified as an offset from the text, along with optional color and blur radius values. Multiple shadows are applied front-to-back, with the first-specified shadow on top.
相关问答
所有这些阴影都是不需要的，你可以通过以下方式达到预期的效果： text-shadow: 1px 1px 1px #fff, 2px 2px 2px #111;
阴影贴图按声明中定义的层次结构进行工作，因此将白色阴影放置在起始位置会将其放在灰色阴影的顶部，并使其看起来像边框。 还值得注意的是，白色边框只会显示在阴影中而不显示在文字周围，因此将文字置于较暗的背景上不会显示朝向该字词顶部和左侧的白色边框。 All of those shadows aren't needed, you can achi
...
是的，但不是你会想象的。 根据caniuse (一个非常好的资源)，没有任何支持，没有可以为IE9添加text-shadow支持的polyfill。 但是， IE有自己的专有文字阴影( 详见这里 )。 示例实现，从他们的网站(在IE5.5到IE9中的工作)： p.shadow {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}
为了跨浏览器的兼容性和代码的未来考虑，请记住还要
...
以下是使用“filter”属性将dropshadow应用于某些svg的示例 。 如果你想控制dropshadow的不透明度，看看这个例子 。 slope属性控制给予dropshadow多少不透明度。 示例中的相关位：
...
您无法禁用它们，您只能使用CSS覆盖样式： body * {
text-shadow:none;
...etc...
}
(嘿，我从来没有说过这样做是个好主意，但它会起作用) 编辑：这个答案让我走上正轨; 谢谢。 这是解决方案： 创建一个名为NoCSS3的类，定义如下： .NoCSS3 * {
text-shadow: none !important;
box-shadow: none !important;
border-radius: 0px !impor
...
你可以简单地用逗号分隔阴影： text-shadow: 0 0 55px black, 0 1px 0 rgba(0,0,0, .25); 演示小提琴 您可能需要查看MDN上的这篇文章以获取更多信息。 文本阴影CSS属性为文本添加阴影。 它接受逗号分隔的阴影列表，以应用于元素的文本和文本装饰。 每个阴影都指定为与文本的偏移量，以及可选的颜色和模糊半径值。 多个阴影是从前到后应用的，第一个指定的阴影在顶部。 You can simply seperate the shadows with a com
...
不要使用填充来调整文本的位置，使用line-height JSFiddle演示 .count{
background: #002244;
color: white;
font-size: 32px;
border-radius: 50%;
box-sizing: border-box;
height: 50px;
width: 50px;
text-align: center;
line-height:50px; /
...
我发现两个最大的罪犯(就性能而言)是阴影的模糊量以及你是否使用任何alphas(rgba，hsl等)。 硬件加速是使用任何css3好东西并保持可接受性能的关键。 除非你特别要求三维操作，否则Webkit(不确定FF4)甚至不会使用GPU。 您可以通过简单地应用0像素3d变换来踢任何元素的GPU： -webkit-transform: translate3d(0,0,0);
-webkit-transform: translateZ(0);
Paul Irish在css3性能和使
...
这应该可以帮助您开始 @-webkit-keyframes myfirst
{
from {text-shadow: 3px 3px 5px #ba8b00;}
to {text-shadow : none;}
}
@-moz-keyframes myfirst
{
from {text-shadow: 3px 3px 5px #ba8b00;}
to {text-shadow : none;}
}
@keyframes myfirst
{
from {t
...
嘿，不，你可以做到这一点 .div{
box-shadow:0 0 0 0 rgba(0,0,0,1); // outer shadow of box
box-shadow:0 0 0 0 rgba(0,0,0,1) inset; // inner shadow of box
text-shadow:0 0 0 rgba(0,0,0,1); // for text shadow
}
更多信息请点击这里http://css-tricks.com/snippets/css/css-text-sh
...
仍然是一个错字问题...你有一个额外的关闭，删除它，它会工作： 工作实例 (function($) {
$("button.call-us").click(function() {
$(this).hide();
$("p.phonenumber").show();
});
})(jQuery); .phonenumber {
display: none;
}