css设置边框阴影的技巧 css内阴影怎么设置 _生活百科

昨天我发了几篇关于CSS文字效果的文章，接下来给大家介绍一下如何使用CSS完成文本阴影效果。
该 text-shadow 属性可用于为您的文本提供美丽的阴影效果。使用此属性，可以为HTML元素的文本提供不同类型的阴影效果。
您可以为此属性的四个参数赋予值，如下所示。
CSS
text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];值
这些参数定义如下。

水平偏移（必需）：这是阴影与文本的水平距离。正水平偏移将阴影置于文本的右侧，而负水平偏移将阴影置于文本的左侧。
垂直偏移（必需）：这是文本上方或下方阴影的垂直距离。正垂直偏移将阴影置于文本的底部，而负垂直偏移将阴影置于文本的顶部。
模糊半径（可?。?给予模糊半径使阴影模糊。较高的模糊半径值将使阴影更加模糊和扩展，从而使其更大更轻。另一方面，较小的模糊半径值将导致更清晰，更亮和更少扩展的阴影。不允许使用负值。
color（可?。?指定阴影的颜色。

让我们通过一个例子来理解这一点。以下代码将更改文本的字体大小和颜色。
HTML
<p>Text Shadow</p>CSS
p { font-family: 'Muli', sans-serif; font-size: 47px; font-weight: 900; color: #CFC547;}现在，考虑到上述每个参数的影响，让我们为这个文本画一个阴影。
水平偏移如果只想在文本的左侧或右侧使用阴影，则给出垂直偏移0的值。
要将阴影置于文本的右侧，请给出正的水平偏移值。
CSS
.text { text-shadow: 3px 0 rgba(81,67,21,0.8);}负值会将阴影置于框的左侧。
CSS
.text { text-shadow: -3px 0 rgba(81,67,21,0.8);}

文章插图
在上面的代码中，

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：