DigitalOcean 提供适用于您旅程各个阶段的云产品。 立即开始使用 200 美元的免费积分!
p {
text-shadow: 1px 1px 1px #000;
}
您可以通过逗号分隔来应用多个文本阴影
p {
text-shadow: 1px 1px 1px #000,
3px 3px 5px blue;
}
前两个值指定阴影偏移的长度。 第一个值指定阴影的水平距离,第二个值指定阴影的垂直距离。 第三个值指定模糊半径,最后一个值描述阴影的颜色
1. value = X 坐标
2. value = Y 坐标
3. value = 模糊半径
4. value = 阴影颜色
使用正数作为前两个值最终会将阴影放置在文本的水平右侧(第一个值)并将阴影放置在文本的垂直下方(第二个值)。
第三个值,模糊半径,是一个可选值,可以指定,但也可以不指定。 它是文本拉伸的像素量,会导致模糊效果。 如果您不使用第三个值,则它被视为您指定了零的模糊半径。
此外,请记住,您可以使用 RGBa 或 HSLa 值作为颜色,例如,白色 40% 的透明度
p {
text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
}
示例
更多信息
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
2+ | 1.1+ | 3.5+ | 9.5+ | 10+ | 任何 | 任何 |
不知道为什么,只有在android 2.2.2中,如果将第三个属性设置为非零,它才起作用。
例如。
text-shadow: 1px 3px 0 red; /不起作用/
text-shadow: 1px 3px 1px red; /起作用/
嗨,Erik,
0 也需要带 px,所以 text-shadow: 1px 3px 0px red; 应该起作用。
嗨,0 必须带有 px
谢谢,这帮助了我!
非常好
很酷,感谢您的示例!我不知道用 text-shadow 就可以实现这些效果。所以我可以有多个 text-shadow 样式,只要它们用逗号分隔吗?
谢谢,这很好用
这里有更多文字效果
http://ustutorials.com/css3-tutorials/css3-text-shadow.php
我知道这也可以用四个值来实现。但是
在 Edge/IE 中起作用,但在其他浏览器中不起作用。所以用四个值,它只在微软浏览器中起作用。谢谢
.CBSE {
width: 30%;
height: 150px;
background: cyan;
color: #000;
margin: 1%;
position: relative;
box-shadow: 0px 0px 6px #000;
border-radius: 5px;
}
.CBSE p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
text-shadow: 3px 3xp 5px #000000;
}
.shadow {
text-shadow: 3px 3px 5px #000;
}
/* p 的文本阴影不起作用 */
CBSE
嘿!检查你的语法:将
3xp
更改为3px
应该可以解决问题。一个错误的值将使整个属性无效。 https://codepen.io/geoffgraham/pen/dyMVZVe