CSS3中p元素上的双重文本阴影 [英] Double text shadow on p element in CSS3

问题描述

是否可以使用CSS3在一个 p 元素上应用两个 text-shadow 值?我想创建一个非常浅的黑色 background ，其像素为1个像素 border .

Is it possible to apply two text-shadow values on one p element with CSS3? I want to create a very light black background with a 1 pixel border.

类似这样的东西:

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)

推荐答案

您可以简单地用逗号分隔阴影:

You can simply seperate the shadows with a comma:

文本阴影:0 0 55px黑色，0 1px 0 rgba(0,0,0，.25);

演示小提琴

您可能想在MDN上查看此文章以获取更多信息.

You may want to have a look at this article on MDN for further information.

text-shadow CSS属性为文本添加阴影.它接受一个以逗号分隔的阴影列表将应用于文本和元素的文字装饰.

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.

这篇关于CSS3中p元素上的双重文本阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！