使用 CSS 创建阴影

dirilisartogul.

你说的影子是什么意思？我们如何给文本添加阴影？如何创建柔和的阴影？如何使用CSS创建阴影？在本文中，我们将学习与阴影相关的命令的一般结构和形式。在接下来的两篇文章中，我们将了解阴影的更高级形式，以及一系列更有趣的示例！ 帖子标题[ 隐藏] 1.shadow命令的属性类型 1.1文本阴影属性的概念 1.2 box-shadow属性的概念 2文本阴影属性 2.1水平阴影 2.2垂直阴影 2.3阴影透明度 2.4阴影颜色 3 个盒子阴影属性 3.1阴影的范围 4学期末 5.结论 影子命令的多种属性 在CSS中，我们可以通过以下两个属性来使用阴影： 文字阴影 盒子阴影 文本阴影属性的概念 该属性可以对文本和文本进行阴影处理，并且对包含我们文本的元素没有影响。 例如，使用text-shadow，在下面的元素中，阴影被赋予给文本而不是元素！

世界你好！</span> 结果： 文本阴影属性 box-shadow属性的概念 box-shadow 的功能与 text-shadow 属性不同，它不是为文本提供阴影，而是为相应元素的边框提供阴影。 我们再次使用以下 span 元素，但这次使用CSS中的 box-shadow 属性。 <span>世界你好！</span> 结果如下： 盒子阴影属 阿尔及利亚 手机号码 性 影子命令和其他命令一样，有自己的语法和书写风格，我们必须遵循！ 我们从 text-shadow 属性开始。 文本阴影属性 命令的一般形式如下： text-shadow属性的书写形式 水平阴影 要水平移动阴影，我们需要一个起点来开始移动。阴影移动的起源和开始来自于我们分配阴影的元素或文本。 在下面的示例中，我们认为垂直阴影、阴影宽度和阴影颜色是固定的。 注意包含水平阴影的第一个值： 文本阴影中的水平阴影我们可以看到，根据水平阴影的负值或正值，我们可以确定它的移动和位移。负号将阴影向左移动，正号将阴影向右移动。 垂直阴影 该值的作用与水平阴影完全相同。不同之处在于，阴影从文本或元素的主体向下或向上移动，具体取决于负值或正值。



考虑以下示例： 文本阴影中的垂直阴影 大多数阴影都是使用这两种阴影（即水平和垂直）的组合来制作的。通常，单侧阴影不会对我们的文本或元素的美感产生特殊效果。例如，在下面的示例中，我们尝试使用两种阴影： text-shadow中垂直和水平阴影的组合 阴影透明度 使用这个值，我们可以确定阴影的透明度或模糊程度，请注意以下示例： 文本阴影中的阴影透明度 我们保持位移值和阴影颜色不变。正如您所看到的，随着透明度值减小，阴影变得更锐利，而通过增加透明度值，我们得到更柔和且模糊的阴影。 注意：阴影透明度不接受负值！ 阴影颜色 阴影的颜色是使用我们在前面的章节中解释过的不同值来确定的。 例如，考虑以下示例： 文本阴影中的阴影颜色在此示例中，我们使用三种主要着色方法将蓝色分配给所需的色调。