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 属性提供了两个阴影值，以逗号分隔。第一个值将在文本的右侧绘制阴影，而第二个值将在文本的左侧绘制阴影。

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

整理不易，请大家多多关注支持我，谢谢！

览图

首先查看预览图:

多彩方块

原理

采用了 background 属性 background: inherit;

inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 all。对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。继承始终来自文档树中的父元素，即使父元素不是包含块。

线性渐变 linear-gradient

线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点。

用法：

// 渐变轴从左上角出发并且呈 45 度。
background: linear-gradient(45deg, red, blue);

伪元素 ::after

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

.content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 获取其父元素的计算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
}

滤镜 filter

在该程序中调用了2个函数： blur(20px) brightness(80%);

blur()：将高斯模糊应用于输入图像。

brightness()：将线性乘法器应用于输入图像，以调整其亮度。值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。

至于代码中还有其他知识点，也就是 margin 、position 等基础内容了。

全部代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴影和背景一致</title>
    <style>
        .content-item {
            position: relative;
            width: 260px;
            height: 260px;
            border-radius: 10px;
            /* background: linear-gradient(90deg, #e66465, #9198e5); */
            background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
                linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
                linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
            margin: 100px auto;
        }

        .content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 获取其父元素的计算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="content-item"></div>
    </div>
</body>

</html>

参考文章

css 设置盒子阴影，阴影和背景图保持一致_css filter 阴影色和背景色一致_随忆~的博客-CSDN博客

欢迎收藏该文章！

程序员web前端分享CSS3 边框，通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。

在本章中，您将学到以下边框属性：

border-radius

box-shadow

border-image

浏览器支持

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 支持所有新的边框属性。

注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

CSS3 圆角边框

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。

在 CSS3 中，创建圆角是非常容易的。

在 CSS3 中，border-radius 属性用于创建圆角：

实例

向 div 元素添加圆角：

1. div

2. {

3. border:2px solid;

4. border-radius:25px;

5. -moz-border-radius:25px; /* Old Firefox */

6. }

CSS3 边框阴影

在 CSS3 中，box-shadow 用于向方框添加阴影：

实例

向 div 元素添加方框阴影：

1. div

2. {

3. box-shadow: 10px 10px 5px #888888;

4. }

CSS3 边框图片

通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：

用于创建上面的边框的原始图片：

实例

使用图片创建围绕 div 元素的边框：

1. <font color="#000000" size="3">div

2. {

3. border-image:url(border.png) 30 30 round;

4. -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */

5. -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */

6. -o-border-image:url(border.png) 30 30 round; /* Opera */

7. }</font>

新的边框属性

在线咨询

上一篇：只用一个js文件，为你的网站加个黑暗模式
下一篇：Sketch 和 PS中的设计图如何实现“自动切图”？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS文本阴影

水平偏移

垂直偏移

模糊半径

颜色

览图

原理

全部代码

参考文章

您的项目需求