龙空技术网

CSS文本阴影

小程序猿呆呆 205

前言:

现时咱们对“css阴影按钮”都比较讲究,看官们都需要了解一些“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);}

在上面的代码中, rgba(81,67,21,0.8) 是阴影的颜色。如果没有给出阴影颜色,则文本阴影的颜色将与文本的颜色相同。

垂直偏移

与上面的情况相同,如果您希望阴影仅位于文本的顶部或底部,请给出0水平偏移。

正垂直偏移值将阴影置于文本的底部。

CSS

.text {	text-shadow: 0 4px rgba(81,67,21,0.8);}

负值会将阴影置于文本的上方。

CSS

.text {	text-shadow: 0 -4px rgba(81,67,21,0.8);}

如果你想要一个右下角的阴影,那么给出水平偏移和垂直偏移都是正的。

CSS

.text {	text-shadow: 3px 4px rgba(81,67,21,0.8);}
模糊半径

模糊使阴影看起来真实。要为阴影提供模糊效果,请给它一些正方形模糊半径。

CSS

.text {	text-shadow: 3px 4px 7px rgba(81,67,21,0.8);}
颜色

您可以通过提供任何颜色名称或颜色值(如rgba或hsla)为阴影指定颜色。如果将不透明度设置为小于1的值(如上面的情况,不透明度设置为0.8),它会为阴影提供漂亮且更自然的外观。

给多个阴影

您还可以为某些文本提供多个阴影,以提供不同的阴影效果。这些值以逗号分隔给 text-shadow属性。

例如,请考虑以下代码。

CSS

.text { text-shadow: 3px 0px 7px rgba(81,67,21,0.8), -3px 0px 7px rgba(81,67,21,0.8);}

这里,为text-shadow 属性提供了两个阴影值 ,以逗号分隔。第一个值将在文本的右侧绘制阴影,而第二个值将在文本的左侧绘制阴影。

考虑一些给出多个阴影的例子。

整理不易,请大家多多关注支持我,谢谢!

标签: #css阴影按钮