如何在CSS中使用边框、阴影和轮廓设置HTML元素的样式

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

使用阴影、边框和轮廓是 Web 开发的关键组成部分，可以提供围绕 HTML 元素和文本项的可视化定义。可以通过五个主要的 CSS 属性来控制边框和阴影的外观：border、border-radius、box-shadow、text-shadow 和 outline . 阴影提供深度并帮助元素脱颖而出，而 border 属性可以执行许多不同的视觉功能，从在内容之间创建线性分隔线到定义网格空间。 border-radius 属性在盒子上创建圆角，甚至可以做成圆形。最后，outline 是一个经常被忽视的属性，它提供了许多与 border 属性相同的功能，而不会中断内容流。

在本教程中，您将使用这些属性为虚构的太空旅游公司创建合法性通知。在整个演示中，您将使用基于边缘的属性创建视觉丰富的容器。此外，您将考虑到有关更复杂值的细微差别，例如多个阴影以及不同的浏览器如何以不同的方式实现某些属性。

先决条件

了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
类型选择器、组合选择器和选择器组的知识，您可以在如何选择 HTML 元素以使用 CSS 设置样式中找到这些知识。
CSS中的color属性的理解。请参阅如何在 CSS 中使用颜色值以了解更多信息。
具有 background 属性的 CSS 渐变知识。查看如何使用 CSS 将背景样式应用于 HTML 元素，以获得创建渐变背景的经验。
在您的本地计算机上保存为 index.html 的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置您的 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您是 HTML 新手，请尝试整个如何用 HTML 构建网站系列。

设置基本 HTML 和 CSS

在本节中，您将为在整个教程中编写的所有视觉样式设置 HTML 基础。您还将创建 styles.css 文件并添加设置内容布局的样式。

首先在文本编辑器中打开 index.html。然后，将以下 HTML 添加到文件中：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Travel Disclosure - Destination: Moon</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

<head> 元素内部定义了很多页面设置。第一个 <meta> 元素定义用于文本的字符集。这样，大多数特殊字符（例如重音符号）将无需特殊 HTML 代码即可呈现。第二个 <meta> 元素告诉浏览器，尤其是移动浏览器，如何处理内容的宽度；否则，浏览器将模拟 960px 桌面宽度。 <title> 元素为浏览器提供页面的标题。 <link> 元素加载 CSS 文件，您将在本教程中在其中编写样式。

该页面还需要设置样式的内容。对于法律文本，您将使用 Legal Ipsum 中的示例内容作为填充副本，仅用于样式目的。

在文本编辑器中返回 index.html 并添加以下代码块中突出显示的 HTML：

索引.html

<!doctype html>
<html>
  ...
  <body>
    <section class="disclosure-alert">
      <header class="disclosure-header">
        <h2  class="disclosure-title"><em>Destination: Moon</em> Travel Disclosure</h2>
      </header>
      <div class="disclosure-content">
        <p>Although space travel is routine practice, there are many unknown possibilities that any traveller must be aware of before traveling with <em>Destination: Moon</em>. Agreeing to this disclosure of knowns is required prior to purchase of tickets with <em>Destination: Moon</em>. PLEASE, READ AND AGREE TO THE FOLLOWING DISCLOSURE OF TRAVEL UNKNOWNS BEFORE PROCEEDING TO PURCHASE.</p>
        <div class="legal-contents">
          <p>Effect of Termination. Upon termination, You agree not to use it under the terms of Sections 4(a) through 4(e) for that Covered Code, or any third party. Description of Modifications.<p>
          <p>You must make sure that you know you can do these things. To make sure the requirements of this Agreement. REQUIREMENTS A Contributor may participate in any way. Notwithstanding the foregoing, if applicable law or agreed to in writing, the Copyright Holder, but only to the terms applicable to Covered Code. Inability to Comply Due to Statute or Regulation.</p>
          <p>If it is impossible for You to the Recipient retains any such Additional Terms. Versions of This License. If you are re-using, b) a hyperlink (where possible) or URL to the terms of Sections 4(a) through 4(e) for that Work shall terminate if it fails to comply with the exception of content that is granting the License. License Terms 1.</p>
          <p>Grant of Patent Infringement. If you have knowledge of patent infringement litigation, then the only applicable Base Interpreter is a "commercial item" as defined in 48 C.F.R. Consistent with 48 C.F.R.</p>
          <p>U.S. Government End Users acquire Covered Code (Original Code and/or as part of a Larger Work; and b) allow the Commercial Contributor then makes performance claims, or offers warranties related to Product X, those performance claims and warranties are such Commercial Contributor's responsibility alone. Under this section, the Commercial Distributor in writing of such Contributor, if any, to grant more extensive warranty protection to some or all of these conditions: (a) You must make it clear that any Modifications made by such Respondent, or (ii) withdraw Your litigation claim is resolved (such as Wikimedia-internal copying), it is Recipient's responsibility to secure any other exploitation. Program, and in any of the provisions set forth in Section 4(b), you shall terminate if it fails to comply with.</p>
          <p>Please note that these licenses do allow commercial uses of your company or organization, to others outside of this License Agreement), provided that You meet the following terms which differ from this License) and (b) You must duplicate the notice in Exhibit A in each changed file stating how and when you changed the files and the definitions are repeated for your past or future use of the Original Code; or 3) for infringements caused by: i) third party against the drafter will not be used as a handle): 1895.22/1011. This Agreement shall be held by the terms of this agreement. If any provision of this license which gives you legal permission to modify NetHack, or otherwise using this software in source and binary forms, with or without modification in printed materials or in related documentation, stating that you provide a service, including but not limited to the terms under which you distribute, wherever you describe the origin or ownership of such termination, the Recipient a non-exclusive, royalty-free, world-wide license to reproduce, analyze, test, perform and/or display publicly, prepare derivative works, distribute, and otherwise use Python 1.6b1 or any part of Derivative Works. If You initiate litigation by asserting a patent infringement against You in that instance.</p>
          <p>Effect of New York and the like. While this license document the following disclaimer in the Work contain all the conditions listed in Clause 6 above, concerning changes from the Work. If you created a Modification, you may at your option offer warranty protection to some or all of the Licensed Program as a product of your Modifications available to others outside of this License.</p>
          <p>Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted to Licensor for inclusion in the documentation and/or other rights consistent with this program; if not, write to the modified files to carry prominent notices stating that You distribute, all copyright, patent, trademark, and attribution notices from the Public Domain or from the Original Code; 2) separate from the Public Domain or from the Work, you may distribute a Compiled Work on their system exactly as it is being maintained, then ask the Current Maintainer to update their communication data within one month. If the program is free software; you can change the License will not have to defend and indemnify every other Contributor to control, and cooperate with the Source Code version of the Licensed Program, or any Contributor.</p>
        </div>
        <div class="button-group">
          <a href="#" class="button button-primary">
            Agree
          </a>
          <a href="#" class="button button-secondary">
            Disagree
          </a>
        </div>
      </div>
    </section>
  </body>
</html>

将您的更改保存到 index.html，然后打开您的网络浏览器。选择 File 菜单项，然后选择 Open 选项并在浏览器中加载您的 index.html 文件。下图演示了此 HTML 将如何在浏览器中呈现：

在与 index.html 相同的目录中创建一个名为 styles.css 的新文件，然后在文本编辑器中打开它。该文件将包含整个教程中使用的所有样式。第一组样式将应用您将从中构建的一般美学。将以下代码块中的 CSS 应用到您的 styles.css 文件：

样式.css

html, body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  font: 100% / 1.5 sans-serif;
  background: url("images/moon-bg.jpg") no-repeat fixed center / cover black;
}
.disclosure-alert {
  background-color: hsl(0, 0%, 95%);
  width: 85%;
  max-width: 48rem;
  margin: auto;
  color: hsl(0, 0%, 20%);
}
.disclosure-header {
  background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
  padding: 2rem 0.5rem;
  text-align: center;
  color: hsl(300, 50%, 95%);
}
.disclosure-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.25;
}
.disclosure-content {
  margin: 1.5rem;
}
.legal-contents {
  margin-top: 1.5rem;
  background-color: white;
  padding: 0.75rem;
  font-family: "Times New Roman", serif;
}
.button-group {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}
.button {
  display: inline-block;
  text-align: center;
  padding: 0.5rem 1rem;
  background: black;
  text-decoration: none;
  color: white;
  width: 50%;
  max-width: 8rem;
}
.button + .button {
  margin-left: 1.5rem;
}
.button-primary {
  background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
}
.button-primary:hover {
  background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
}
.button-secondary {
  background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
}
.button-secondary:hover {
  background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
}

此文件中的样式设置了页面的初始布局，具有居中的法律披露、带有间距并使用线性渐变渲染的按钮以及用作背景的月亮图像。在继续之前，请务必保存 styles.css 文件。

为了显示 body 规则集的 background 属性中链接的图像，您将需要月球背景图像。首先，在与您的 index.html 文件相同的文件夹中创建一个 images 目录：

mkdir images

使用浏览器将此文件下载到新创建的 images 目录，或使用以下 curl 命令通过命令行下载：

curl -sL https://assets.digitalocean.com/articles/68102/moon-bg.jpg -o images/moon-bg.jpg

接下来，返回并刷新您的浏览器。浏览器现在将呈现并将样式应用于页面内容。下图显示了整个页面的呈现方式：

内容的长度使得页面很长。由于这是作为合法副本，.legal-contents 的内容可以成为可滚动的空间。这是通过组合属性 height、max-height 和 overflow 来完成的。

要创建可滚动区域，请在文本编辑器中打开 styles.css。接下来，使用以下代码调整合法内容的高度：

样式.css

...
.legal-contents {
  height: 50vh;
  max-height: 20rem;
  overflow: auto;
  margin-top: 1.5rem;
  background-color: white;
  padding: 0.75rem;
  font-family: "Times New Roman", serif;
}
...

在此代码中，您在 .legal-contents 选择器块中创建了一个 height 属性，然后将其值设置为 50vh，即视口窗口高度的 50% of。您还创建了一个 max-height 属性，其值设置为 20rem。最后，您添加了一个值为 auto 的 overflow 属性，它会在内容溢出容器时创建滚动条。

将这些添加保存到您的 styles.css 文件中，然后返回浏览器并刷新 index.html。页面和主容器的全高度已经压缩。现在，Legal Ipsum 副本可以在其指定容器内滚动，如以下动画所示：

在本节中，您将设置将用于本教程其余部分的主要 HTML。您还可以使用 overflow 属性设置可滚动空间。在下一节中，您将使用 border 属性为这些容器应用边框。

使用 `border` 属性

border 属性是在元素边缘应用样式的原始方法之一。它将任何颜色的线应用于容器的外周。该属性的值由三个部分组成：粗细、样式和颜色。 border 属性将这些值应用于元素的所有四个侧面。您可以使用 border 的方向变化指定单个边，例如 border-top 属性，该属性仅适用于元素的顶部。

要开始使用 border 属性，请在文本编辑器中打开 styles.css 并转到 .disclosure-alert 类选择器。在选择器块中，添加一个 border 属性，其值设置为 1px solid hsl(0, 0%, 0%)，如以下代码块中突出显示的：

样式.css

...
.disclosure-alert {
  background-color: hsl(0, 0%, 95%);
  width: 85%;
  max-width: 48rem;
  margin: auto;
  color: hsl(0, 0%, 20%);
  border: 1px solid hsl(0, 0%, 0%);
}
...

此 border 属性是 简写属性 ，这意味着它的值是其他值的组合。在这种情况下，1px 的厚度表示 border-width 属性值。该值可以是具有单位的任何数值以及一些命名值：thin、medium 和 thick。接下来，solid 是 border-style 值，它定义了元素周围的线将如何出现，在本例中为实心连续线。 border-style 的其他值包括 dotted、dashed、double 和 none。最终值定义了 border-color 属性，它可以是任何有效的颜色值。

将您的更改保存到 styles.css，然后在 Web 浏览器中打开 index.html。主要内容容器周围现在将有一个细黑色边框，当它覆盖月亮背景图像时最为明显。下图描述了 border 如何出现在主内容区域：

接下来，您可以使用 border 属性通过对元素应用高光和阴影来创建深度感。您可以通过在一侧使用比背景颜色浅的方向 border 来实现此目的，然后在相邻一侧使用较暗的颜色。

在文本编辑器中返回 styles.css，然后转到 .disclosure-header 类选择器块。 background 属性上的 linear-gradient() 定义了一个深紫色渐变，过渡到稍暗的阴影。要创建比单独渐变更多的深度，请使用以下代码调整边框：

样式.css

...
.disclosure-header {
  background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
  padding: 2rem 0.5rem;
  text-align: center;
  color: hsl(300, 50%, 95%);
  border-top: 1px solid hsl(300, 50%, 35%);
  border-bottom: 1px solid hsl(300, 50%, 5%);
}
...

您添加了一个值为 1px solid hsl(300, 50%, 35%) 的 border-top 属性，它比起始渐变值稍微轻一些。接下来，您创建了一个 border-bottom 属性，其值设置为 1px solid hsl(300, 50%, 5%)，它比渐变的末端稍暗。

将更改保存到 styles.css，然后返回浏览器并刷新 index.html。紫色标题背景现在在标题顶部有一个轻微的紫色高光，在底部有一个轻微的阴影。下图显示了它在浏览器中的显示方式：

由于 border 是速记属性，因此您可以添加其他速记属性。可以应用 border 来定义两个按钮类的宽度和样式，而 border-color 可以应用于各个类。

要开始使用 border-color，请在文本编辑器中打开 styles.css。在 .button 的选择器块中，添加一个值为 1px solid 的 border 属性，然后为 .button-primary 添加一个 border-color 属性和.button-secondary：

样式.css

...
.button {
  ...
  border: 1px solid;
}
...
.button-primary {
  background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
  border-color: hsl(200, 100%, 15%);
}
.button-primary:hover {
  background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
  border-color: hsl(200, 100%, 10%);
}
.button-secondary {
  background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
  border-color: hsl(200, 10%, 15%);
}
.button-secondary:hover {
  background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
  border-color: hsl(200, 10%, 10%);
}

这为两个按钮定义了 1px 宽度 solid 样式边框。然后，您添加了 border-color 属性来自定义 .button-primary、.button-secondary 及其关联的 :hover 状态选择器的颜色。

将这些更改保存到 styles.css，然后在 Web 浏览器中刷新页面。如下图所示，按钮现在通过匹配的深色边框提供了更多定义：

最后，每个 border 方向也是一个简写。这意味着 -width、-style 和 -color 可以分别应用于方向属性。例如，普通属性 border-right-color 只会将颜色应用于右侧边框。

要使用这些定向的速记 border 属性，请在文本编辑器中返回 styles.css。转到 .legal-contents 选择器块并设置所有四个边框边的宽度和样式，然后自定义每边的颜色：

样式.css

...
.legal-contents {
  height: 50vh;
  max-height: 20rem;
  margin-top: 1.5rem;
  overflow: auto;
  background-color: white;
  border: 1px solid;
  border-top-color: hsl(0, 0%, 65%);
  border-bottom-color: hsl(0, 0%, 100%);
  border-right-color: hsl(0, 0%, 80%);
  border-left-color: hsl(0, 0%, 80%);
  padding: 0.75rem;
  font-family: "Times New Roman", serif;
}
...

在此代码中，您将 border: 1px solid 添加到文件末尾。之后，您还创建了 border-top-color、border-bottom-color、border-right-color 和 border-left-color 属性。对于这些值，您使用了不同的 hsl() 灰度值。

将更改保存到 styles.css，然后在浏览器中重新加载页面。可滚动内容容器现在顶部有一个深灰色边框，侧面有一个稍浅的灰色，底部有一个白色边框。这是为了给人一种感觉，即内容嵌入在浅灰色背景后面，从而产生高光位于底部边缘的效果，如下图所示：

在本节中，您使用了 border 属性及其各种速记变体。您创建了几个边框，这些边框根据需要应用于不同的侧面。在下一节中，您将使用 border-radius 属性，它允许容器的角是圆形的。

应用 `border-radius`

早在 border-radius 属性出现之前，圆角就已经成为网络上的一种设计美学。此属性可以接受任何数字单位或百分比值，并且是类似于 margin 或 padding 属性的简写属性。这意味着每个角落都可以根据需要单独调整。

要开始使用 border-radius 属性，请在文本编辑器中打开 styles.css。转到 .disclosure-alert 选择器块和 border-radius 属性。然后，将该值设置为 1.5rem，该值将应用于属性的所有四个角。以下代码块中突出显示的 CSS 显示了它的编写方式：

样式.css

...
.disclosure-alert {
  ...
  border: 1px solid hsl(0, 0%, 0%);
  border-radius: 1.5rem;
}
...

将此添加保存到 styles.css，然后在 Web 浏览器中打开或刷新 index.html。只有底部的两个角看起来是圆形的，而顶部的两个角将保持尖锐的边缘。下图说明了它是如何在浏览器中呈现的：

只有两个圆角可见的原因是后代元素在网络上如何相互交互。浏览器在保持内容可见方面犯了错误。 .disclosure-alert 确实有四个圆角，但是因为 .disclosure-header 在元素内部并且没有圆角，所以它与圆角重叠。一个快速的解决方法是将 overflow: hidden 添加到 .disclosure-alert，导致容器剪辑任何后代容器和内容。但是，这种方法可能会导致必要的内容变得难以辨认或不可见。更好的做法是将 border-radius 应用于 .disclosure-header 类以匹配其祖先角的曲线。

要调整重叠角，请在文本编辑器中返回 styles.css。转到 .disclosure-header 选择器块并添加 border-radius 属性。由于只有前两个角需要调整，因此值为 1.5rem 1.5rem 0 0：

样式.css

...
.disclosure-header {
  ...
  border-top: 1px solid hsl(300, 50%, 35%);
  border-bottom: 1px solid hsl(300, 50%, 5%);
  border-radius: 1.5rem 1.5rem 0 0;
}
...

此值的扩展格式将在左上角和右上角应用 1.5rem 曲线。

将更改保存到 styles.css 并在浏览器中刷新 index.html。紫色标题现在有一个圆角，并且没有覆盖主容器。但是出现了一个新问题，因为父容器中的白色条从紫色标题后面达到峰值，如下图所示：

.disclosure-alert 和 .disclosure-header 的角与 1.5rem 的角尺寸相同，但它们的宽度有尺寸差异。这种大小差异是由.disclosure-alert元素左右的border造成的。由于border两侧的宽度为1px，因此尺寸差为2px或0.125rem。为了使曲线匹配，.disclosure-header 的 border-radius 需要比当前的 0.125rem 小。将 1.5rem 的 border-radius 值更改为 1.375rem，如以下代码块中突出显示的：

样式.css

...
.disclosure-header {
  background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
  padding: 2rem 0.5rem;
  text-align: center;
  color: hsl(300, 50%, 95%);
  border-top: 1px solid hsl(300, 50%, 35%);
  border-bottom: 1px solid hsl(300, 50%, 5%);
  border-radius: 1.375rem 1.375rem 0 0;
}
...

将此更改保存到 styles.css，然后在 Web 浏览器中刷新页面。白条现在消失了，两个元素的曲线在适当的位置相遇。以下放大的屏幕截图显示了这些曲线是如何排列的：

最后，您将对主容器底部的按钮应用圆角。这些纽扣呈药丸形状，顶部和底部长而平，侧面全圆。为此，border-radius 值需要是大于元素高度的基于单位的值。

要制作药丸形按钮，请在文本编辑器中打开 styles.css。在 .button 选择器块中，添加 border-radius 属性，然后将值设置为 2rem。只要大于计算高度、font-size、line-height、padding和[ X151X] 可以影响元素的整体高度。以下代码块中突出显示的 CSS 显示了添加此属性的位置：

样式.css

...
.button {
  ...
  border: 1px solid;
  border-radius: 2rem;
}
...

这种方法有两点需要注意。第一个是未在此元素上设置 height 值。应避免设置 height 值，因为内容可以并且将处于流出容器的位置。通过避免设置 height，按钮可以增长以匹配总内容。其次，这对于基于百分比的值无法正常工作。 border-radius 属性上基于百分比的值会弯曲高度和宽度的百分比，从而导致椭圆形而不是圆角。

将更改保存到 styles.css，然后返回浏览器并刷新 index.html。该页面现在将呈现两个椭圆形的药丸状按钮，如下图所示：

在本节中，您使用 border-radius 属性将圆角应用于多个元素，发现 border-radius 不会阻止后代元素离开弯曲空间。您还调整了 border-radius 的值，以在多个圆形元素相互叠加时匹配元素的宽度。在下一节中，您将使用 text-shadow 属性将阴影应用到文本内容。

使用 `text-shadow` 属性

将阴影应用于文本在日常 Web 开发中有很多用途。阴影可以创建深度、发光效果或帮助文本在可能被忽视的地方突出。在本节中，您将对多个元素应用 text-shadow 以创建各种视觉效果。

text-shadow 属性最多包含四个值：x 轴偏移、y 轴偏移、模糊半径和颜色。例如，这些值可能如下所示：2px 4px 10px red。在这四个值中，仅需要偏移值。阴影颜色默认为文本的color。

要开始使用 text-shadow，您将首先在标题上创建发光效果。在文本编辑器中打开 styles.css 并转到 .disclosure-header 类选择器。在选择器块中，添加以下 text-shadow 属性：

样式.css

...
.disclosure-header {
  ...
  border-radius: 1.375rem 1.375rem 0 0;
  text-shadow: 0 0 0.375rem hsl(300, 50%, 50%);
}
...

发光效果意味着颜色将从文本的每个边缘散发出来，因此此处的 x 和 y 轴偏移值设置为 0。您将光晕的模糊设置为 0.375rem（相当于 6px），以便为文本提供微妙的颜色光晕。最后，颜色值设置为比 color 属性暗一点：hsl(300, 50%, 50%)。

将此添加保存到您的 styles.css 文件中。接下来，在网络浏览器中打开 index.html。紫色渐变背景上的粗体标题文本现在周围有一个中间紫色的光晕。下图说明了这种效果是如何在浏览器中呈现的：

接下来，可以在文本元素上放置多个阴影，从而在文本上创建浮雕效果。这种效果是通过在对象下方放置一个浅色阴影和在上方放置一个深色阴影来实现的。

要创建浮雕效果，请在文本编辑器中返回 styles.css。效果将添加到容器底部的按钮中。对于 .button-primary、.button-primary:hover、.button-secondary 和 .button-secondary:hover 选择器，添加 text-shadow 属性。查看以下代码块中突出显示的 CSS 的值：

样式.css

...
.button-primary {
  border: 1px solid hsl(200, 100%, 5%);
  background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
  text-shadow: 0 1px hsl(200, 100%, 50%),
               0 -1px hsl(200, 100%, 5%);
}
.button-primary:hover {
  border: 1px solid hsl(200, 100%, 0%);
  background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
  text-shadow: 0 1px hsl(200, 100%, 45%),
               0 -1px hsl(200, 100%, 0%);
}
.button-secondary {
  border: 1px solid hsl(200, 10%, 5%);
  background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
  text-shadow: 0 1px hsl(200, 10%, 50%),
               0 -1px hsl(200, 10%, 5%);
}
.button-secondary:hover {
  border: 1px solid hsl(200, 10%, 0%);
  background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
  text-shadow: 0 1px hsl(200, 10%, 45%),
               0 -1px hsl(200, 10%, 0%);
}

第一个阴影是较浅的底部插图高光。这是通过 0 1px 偏移量完成的，然后是较浅版本的背景渐变色调。接下来，您使用 0 -1px 偏移在文本上方制作阴影，这会将阴影向上拉 1px 并使用较暗的背景颜色变化。

将这些更改保存到 styles.css，然后在 Web 浏览器中刷新页面。按钮内的文本现在在文本下方有一个轻微的突出显示，在文本上方有一个轻微的阴影。这些 text-shadow 值的组合创建浮雕效果，如下图所示：

在本节中，您将 text-shadow 属性应用于一些元素。您在标题上创建了发光效果，并在按钮上创建了带有多个阴影的浮雕效果。在下一节中，您将使用 box-shadow 属性对 HTML 元素应用阴影。

将 `box-shadow` 添加到元素

正如 text-shadow 属性允许文本内容具有阴影一样，box-shadow 属性也允许元素和容器具有阴影。 box-shadow 有两个额外的功能，您将在本节中探索，包括控制模糊的传播和在元素内设置阴影的能力。

要开始使用 box-shadow 属性，请在文本编辑器中打开 styles.css。在 .disclosure-alert 选择器块中，添加 box-shadow 属性。就像 text-shadow 一样，需要 x 和 y 轴偏移值，如果没有提供颜色，则使用 color 属性值。对于第一个 box-shadow，将偏移设置为 0，将模糊设置为 0.5rem，将颜色设置为深色 hsl(300, 40%, 5%)，如以下代码中突出显示的那样堵塞：

样式.css

...
.disclosure-alert {
  ...
  border-radius: 1.5rem;
  text-shadow: 0 0 0.375rem hsl(300, 50%, 50%);
  box-shadow: 0 0 0.5rem hsl(300, 40%, 5%);
}
...

保存对 styles.css 的更改并在 Web 浏览器中刷新页面。现在有一个近乎黑色的阴影从容器中扩散开来。还要注意，阴影尊重并遵循您使用 border-radius 属性创建的曲线。下图显示了它是如何在浏览器中呈现的：

接下来，返回 styles.css 并开始通过向 box-shadow 添加两个额外的大发光效果来创建更复杂的效果。在每个新阴影之间添加一个逗号，将每个阴影设置为具有 0.5rem 的 y 轴偏移量。然后设置大模糊并使用调色板中蓝色和紫色的较浅变化，如以下代码块中突出显示的那样：

样式.css

...
.disclosure-alert {
  ...
  box-shadow: 0 0 0.5rem hsl(300, 40%, 5%),
              0 0.5rem 6rem hsl(200, 40%, 30%),
              0 0.5rem 10rem hsl(300, 40%, 30%);
}
...

这些阴影的顺序很重要。第一个接近黑色的阴影将出现在新阴影的上方，随后的每个阴影都添加在下一个阴影的后面。

将您的更改保存到 styles.css 并在浏览器中刷新页面。如下图所示，多个阴影的组合呈现出独特的效果：

box-shadow 属性的模糊扩展功能可用于创建深度感。点差值接受正值和负值。负值传播与强烈的偏移和模糊相结合，会产生一种感觉远离源容器的阴影。

首先，在文本编辑器中返回 styles.css。在 .disclosure-alert 选择器上的黑色小阴影和较大的蓝色阴影之间，从代码块中添加以下突出显示的 CSS：

样式.css

...
.disclosure-alert {
  ...
  box-shadow: 0 0 0.5rem hsl(300, 40%, 5%),
              0 6rem 4rem -2rem hsl(300, 40%, 5%),
              0 0.5rem 6rem hsl(200, 40%, 30%),
              0 0.5rem 10rem hsl(300, 40%, 30%);
}
...

阴影集的这种添加使 x 轴偏移保持在 0，但将 y 轴显着移动到 6rem。接下来，模糊没有辉光那么大，但在 4rem 的大小上还算不错。然后是模糊扩展值，在本例中设置为 -2rem。点差的默认值为 0，等于容器。在 -2rem 处，扩展将从容器向内凝结，以创建深度的视觉效果。

将更改保存到 styles.css，然后在浏览器中刷新 index.html。阴影是深紫色，给人一种主要内容框漂浮在月球表面上方的感觉，如下图所示：

box-shadow 的另一个用途是创建轻微的高光和阴影斜角效果，就像您之前在标题上使用 border 属性所做的那样。使用 box-shadow 而不是 border 的优点是它不会影响盒子模型，这会导致内容流的变化。它也可以与 border 一起使用。当将此效果与 border 一起使用时，必须将 inset 值添加到 box-shadow 以便阴影位于容器内。

要开始在 box-shadow 上使用 inset 值，请在文本编辑器中打开 styles.css。此效果将添加到按钮中，因此您将这些样式应用到 .button-primary、.button-primary:hover、.button-secondary 和 .button-secondary:hover。与 text-shadow 一样，这将由 0 1px 和 0 -1px 偏移组合组成。不同之处在于单词 inset 可以添加到值的开头或结尾，如以下代码块中突出显示的那样：

样式.css

...
.button-primary {
  ...
  text-shadow: 0 1px hsl(200, 100%, 50%),
               0 -1px hsl(200, 100%, 5%);
  box-shadow: inset 0 1px hsl(200, 100%, 50%),
              inset 0 -1px hsl(200, 100%, 15%);
}
.button-primary:hover {
  ...
  text-shadow: 0 1px hsl(200, 100%, 45%),
               0 -1px hsl(200, 100%, 0%);
  box-shadow: inset 0 1px hsl(200, 100%, 45%),
              inset 0 -1px hsl(200, 100%, 10%);
}
.button-secondary {
  ...
  text-shadow: 0 1px hsl(200, 10%, 50%),
               0 -1px hsl(200, 10%, 5%);
  box-shadow: inset 0 1px hsl(200, 10%, 50%),
              inset 0 -1px hsl(200, 10%, 15%);
}
.button-secondary:hover {
  ...
  text-shadow: 0 1px hsl(200, 10%, 45%),
               0 -1px hsl(200, 10%, 0%);
  box-shadow: inset 0 1px hsl(200, 10%, 45%),
              inset 0 -1px hsl(200, 10%, 10%);
}

将这些更改保存到 styles.css，然后在浏览器中刷新 index.html。按钮现在具有高亮和阴影，类似于文本。这与渐变背景相结合，为按钮创造了一种简单而独特的效果。下图显示了它是如何在浏览器中呈现的：

最后，您还可以将模糊扩散值应用于嵌入阴影。扩展将模糊的起点从边缘向外移动，但使用 inset 时，扩展会将起点向内移动。这意味着当对 inset 上的展开应用负值时，阴影会扩大到元素的查看区域之外。扩展的向外扩展可以创建一个看起来像一个短渐变的阴影。当阴影应用在元素内容下方时，这可能会产生元素在边缘处具有圆角的错觉。

要开始创建此效果，请在文本编辑器中打开 styles.css。导航到 .legal-contents 类选择器并添加 box-shadow 属性。这个阴影将由三个阴影组成。第一个将在整个容器内部设置一个短阴影，接下来的两个将在元素的顶部和底部提供一个细长的光影。以下代码块中突出显示的 CSS 演示了如何设置：

样式.css

...
.legal-contents {
  ...
  font-family: "Times New Roman", serif;
  box-shadow: 0 0 0.25rem hsl(0, 0%, 80%) inset,
              0 4rem 2rem -4rem hsl(0, 0%, 85%) inset,
              0 -4rem 2rem -4rem hsl(0, 0%, 85%) inset;
}
...

将更改保存到 styles.css，然后在浏览器中刷新页面。阴影现在正在创建一种效果，使法律文本看起来像容器中的一个窗口。阴影还有助于增强应用于此元素的 border 颜色。下图说明了它是如何在浏览器中呈现的：

在本节中，您将 box-shadow 属性付诸实践。您还使用了 box-shadow 的模糊扩展和 inset 功能来提供更多样式选项。在上一节中，您将实现 outline 属性，然后使用 box-shadow 来制作更通用的 outline。

使用 `outline` 属性

最后一个影响元素边缘的属性是 outline 属性。在所有浏览器中，元素的 :focus 状态是使用 outline 属性生成的。但是，每个浏览器对默认 :focus 样式的实现差异很大。 outline 属性类似于 border 属性，除了两个关键区别：它没有方向属性变化，并且不影响盒子模型。这两个差异中的最后一个使其成为 :focus 样式的理想选择，因为它提供了活动元素的视觉指示器，而不会中断内容流。

要观察 :focus 状态的浏览器默认状态，请在浏览器中打开 index.html。使用 TAB 键导航页面，直到底部按钮之一获得焦点。根据您使用的浏览器，您可能会或可能无法看到默认的 :focus 样式。例如，Firefox 显示白色虚线轮廓，但在浅灰色背景下无法察觉。下图从左到右显示了默认焦点样式在 Firefox、Safari 和 Chrome 中的显示方式：

要开始使用 outline 属性自定义您自己的 :focus 状态，请在文本编辑器中打开 styles.css。转到 .button 类选择器并添加 outline 属性：

样式.css

...
.button {
  ...
}
.button:focus {
  outline: 0.25rem solid hsl(200, 100%, 50%);
}
...

与 border 属性一样，outline 的值包括宽度、样式和颜色值。由于焦点状态的目标是引起对元素的注意，因此宽度增加到 0.25rem，相当于 4px。接下来，将样式设置为 solid，使焦点状态更类似于 Safari 和 Chrome。最后，使用 hsl(200, 100%, 50%) 将颜色设置为深蓝色。

将更改保存到 styles.css，然后返回浏览器并刷新页面。再一次，浏览器决定了 outline 的渲染方式。下图从左到右显示了这些样式在 Firefox、Safari 和 Chrome 中的外观：

在所有三种浏览器中，outline 属性的显示方式完全不同。 Firefox 紧紧抓住按钮的整个圆形形状。 Safari 会创建一个直角框，但会触及按钮的边缘。 Chrome 类似于 Safari，但在按钮和 outline 之间增加了一些额外的空间。

要在所有浏览器中创建看起来像 Firefox 的样式，需要使用 box-shadow 而不是 outline。

要开始创建更自定义的 :focus 状态，请在文本编辑器中返回 styles.css 文件。首先要做的是通过将 .button:focus 选择器的 outline 上的值更改为 none 来禁用浏览器的默认 outline 样式，如以下代码块中突出显示的那样：

样式.css

...
.button {
  ...
}
.button:focus {
  outline: none;
}
...

接下来，转到 button-primary:hover 和 button-secondary:hover 选择器并添加一个逗号，后跟一个 :focus 状态变化，如以下代码块中突出显示的：

样式.css

...

.button-primary {
  ...
}
.button-primary:hover,
.button-primary:focus {
  ...
}
.button-secondary {
  ...
}
.button-secondary:hover,
.button-secondary:focus {
  ...
}

最后，为每个按钮的 :focus、.button-primary: focus 和 .button-secondary:focus 创建两个新的选择器。在新的选择器块中，添加一个新的 box-shadow 属性，该属性具有与 :hover, :focus 对应项相同的嵌入阴影。然后，将偏移和模糊设置为 0 的系列添加另一个阴影。之后，添加 0.25rem 的展开，这将在元素周围创建一条实线、非模糊线。最后，为两个实例添加相同的颜色。以下代码块中突出显示的 CSS 显示了它是如何编写的：

样式.css

...

.button-primary {
  ...
}
.button-primary:hover,
.button-primary:focus {
  ...
}
.button-primary:focus {
  box-shadow: inset 0 1px hsl(200, 100%, 45%),
              inset 0 -1px hsl(200, 100%, 10%),
              0 0 0 0.25rem hsl(200, 100%, 50%);
}
.button-secondary {
  ...
}
.button-secondary:hover,
.button-secondary:focus<^> {
  ...
}
.button-secondary:focus {
  box-shadow: inset 0 1px hsl(200, 10%, 45%),
              inset 0 -1px hsl(200, 10%, 10%),
              0 0 0 0.25rem hsl(200, 100%, 50%);
}

将这些更改保存到 styles.css 并返回浏览器以刷新 index.html。现在，当您使用 TAB 键浏览页面时。无论使用哪种浏览器，按钮上的 :focus 样式现在看起来都相同。下图是 box-shadow 版本的大纲与整个页面一起出现在浏览器中的方式：

最后一节向您介绍了 outline 属性以及每个浏览器如何以不同的方式使用它。至少，需要一个 :focus 指示器来实现可访问性，并且 outline 属性可以完成工作。对此进行扩展，您还通过创建具有较大传播值的 box-shadow 来制作更高级且视觉上一致的 :focus 样式。

结论

对元素的边缘进行样式化可以使网站的设计获得变化和关注。 border 属性可以帮助提供内容之间的定义和分隔。 border-radius 属性柔化了美感，有助于定义设计的态度。文本和框上的阴影带来深度并有助于引起对内容的关注。最后，outline 属性提供了可访问的方法来将注意力集中在具有键盘焦点的元素上。在本教程中，您使用了所有这些属性来创建一个视觉上有趣且可用的网页。了解这些属性中的每一个以及如何以及何时使用它们将有助于解决各种前端界面问题并创造新的体验。

如果您想阅读更多 CSS 教程，请尝试如何使用 CSS 设置 HTML 样式系列中的其他教程。

如何在CSS中使用边框、阴影和轮廓设置HTML元素的样式

介绍

先决条件

设置基本 HTML 和 CSS

使用 border 属性

应用 border-radius

使用 text-shadow 属性

将 box-shadow 添加到元素

使用 outline 属性

结论

使用 `border` 属性

应用 `border-radius`

使用 `text-shadow` 属性

将 `box-shadow` 添加到元素

使用 `outline` 属性