作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。
介绍
使用阴影、边界和外观是网页开发的关键组成部分,可以提供围绕HTML元素和文本元素的视觉定义。边界和阴影的外观可以通过五个主要CSS属性进行操纵:‘边界’、‘边界半径’、‘盒子影’、‘文本影’和‘外观’。阴影提供了深度并有助于元素脱颖而出,而‘边界’属性可以执行许多不同的视觉功能,从创建内容之间的线性划分器到定义网格的空间。
在本教程中,您将使用这些属性创建一个虚构的太空旅游公司的合法性通知。在整个演示中,您将通过使用基于边缘的属性创建视觉丰富的容器。
前提条件
您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity了解 CSS 的类型选择器、组合器选择器和特性组的知识,您可以在 How To Select HTML Elements to Style with CSS查看 How To Apply HTML Styles to HTML Elements with CSS查看 How To Use Color Values with CSS了解更多信息。
建立基本的HTML和CSS
在本节中,您将为您在整个教程中写的所有视觉风格设置HTML基础,您还将创建您的styles.css文件并添加设置内容布局的风格。
首先,在文本编辑器中打开index.html,然后在文件中添加以下HTML:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <title>Travel Disclosure - Destination: Moon</title>
8 <link href="styles.css" rel="stylesheet" />
9 </head>
10 <body>
11 </body>
12</html>
在<head>元素中定义了许多页面设置。第一个<meta>元素定义了文本中使用的字符集。这样,大多数特殊字符,如口音符号,将无需特殊的HTML代码进行渲染。第二个<meta>元素告诉浏览器,特别是移动浏览器,如何处理内容的宽度;否则,浏览器将模拟一个960px桌面宽度。
对于法律文本,您将使用从 Legal Ipsum的样本内容作为填写副本,仅用于造型目的。
在文本编辑器中返回index.html,并从以下代码块中添加突出的HTML:
1[label index.html]
2<!doctype html>
3<html>
4 ...
5 <body>
6 <section class="disclosure-alert">
7 <header class="disclosure-header">
8 <h2 class="disclosure-title"><em>Destination: Moon</em> Travel Disclosure</h2>
9 </header>
10 <div class="disclosure-content">
11 <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>
12 <div class="legal-contents">
13 <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>
14 <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>
15 <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>
16 <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>
17 <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>
18 <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>
19 <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>
20 <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>
21 </div>
22 <div class="button-group">
23 <a href="#" class="button button-primary">
24 Agree
25 </a>
26 <a href="#" class="button button-secondary">
27 Disagree
28 </a>
29 </div>
30 </div>
31 </section>
32 </body>
33</html>
将您的更改保存到 index.html,然后打开您的 Web 浏览器. 选择 ** 文件** 菜单项,然后选择 ** 打开** 选项,并将您的 index.html 文件加载到浏览器中。 以下图像显示该 HTML 将如何在浏览器中渲染:
创建一个名为 styles.css 的新文件,在同一个目录中作为 index.html,然后在文本编辑器中打开它. 此文件将包含整个教程中使用的所有风格。 第一组风格将应用您将构建的通用美学。 将下面的代码块中的 CSS 应用到您的 styles.css 文件:
1[label styles.css]
2html, body {
3 height: 100%;
4}
5
6body {
7 display: flex;
8 margin: 0;
9 font: 100% / 1.5 sans-serif;
10 background: url("images/moon-bg.jpg") no-repeat fixed center / cover black;
11}
12.disclosure-alert {
13 background-color: hsl(0, 0%, 95%);
14 width: 85%;
15 max-width: 48rem;
16 margin: auto;
17 color: hsl(0, 0%, 20%);
18}
19.disclosure-header {
20 background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
21 padding: 2rem 0.5rem;
22 text-align: center;
23 color: hsl(300, 50%, 95%);
24}
25.disclosure-title {
26 margin: 0;
27 font-size: 2rem;
28 line-height: 1.25;
29}
30.disclosure-content {
31 margin: 1.5rem;
32}
33.legal-contents {
34 margin-top: 1.5rem;
35 background-color: white;
36 padding: 0.75rem;
37 font-family: "Times New Roman", serif;
38}
39.button-group {
40 margin-top: 1.5rem;
41 display: flex;
42 justify-content: center;
43}
44.button {
45 display: inline-block;
46 text-align: center;
47 padding: 0.5rem 1rem;
48 background: black;
49 text-decoration: none;
50 color: white;
51 width: 50%;
52 max-width: 8rem;
53}
54.button + .button {
55 margin-left: 1.5rem;
56}
57.button-primary {
58 background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
59}
60.button-primary:hover {
61 background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
62}
63.button-secondary {
64 background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
65}
66.button-secondary:hover {
67 background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
68}
此文件中的风格设置了页面的初始布局,中心的法律披露,带有间隔的按钮和带有线性梯度的渲染,以及月亮的图像作为背景。
要显示在体规则集的背景属性中链接的图像,您需要 月球背景图像。
1mkdir images
使用您的浏览器将此文件下载到您新创建的图像目录,或使用以下弯曲命令通过命令行下载:
1curl -sL https://assets.digitalocean.com/articles/68102/moon-bg.jpg -o images/moon-bg.jpg
接下来,返回并刷新您的浏览器. 浏览器现在将渲染并将风格应用到页面的内容. 下面的图像显示了整个页面如何渲染:
内容的长度为一个非常长的页面. 由于这是作为合法的副本的意图,所以.legal-content的内容可以成为可滚动的空间. 这是通过高度、最大高度和过流的属性组合来完成的。
要创建可滚动的区域,请在文本编辑器中打开styles.css。接下来,用以下代码调整合法内容的高度:
1[label styles.css]
2...
3.legal-contents {
4 height: 50vh;
5 max-height: 20rem;
6 overflow: auto;
7 margin-top: 1.5rem;
8 background-color: white;
9 padding: 0.75rem;
10 font-family: "Times New Roman", serif;
11}
12...
在此代码中,您在.legal-content选项块中创建了一个高度属性,然后将其值设置为50vh,即视图端窗口高度的50%。您还创建了一个最大高度属性,其值设置为20rem。
将这些添加到您的styles.css文件中,然后返回您的浏览器并更新index.html。页面和主容器的全部高度已经凝聚。现在,法律Ipsum副本可以滚动到其指定容器中,如下动画所示:
在整个本节中,您将设置主要的HTML,您将用于本教程的剩余部分。您还将设置一个可滚动的空间,具有过流属性。
使用边境财产
边界属性是将风格应用于元素边缘的原始方式之一,它将任何颜色的线条应用于容器的外围。属性的值由三个组成部分组成:厚度、风格和颜色。 边界属性将这些值应用于元素的四个侧面。
要开始使用边界属性,请在文本编辑器中打开styles.css,然后转到.disclosure-alert类选择器中。
1[label styles.css]
2...
3.disclosure-alert {
4 background-color: hsl(0, 0%, 95%);
5 width: 85%;
6 max-width: 48rem;
7 margin: auto;
8 color: hsl(0, 0%, 20%);
9 border: 1px solid hsl(0, 0%, 0%);
10}
11...
这个边界属性是 _shorthand 属性,这意味着它的值是其他值的组合。在这种情况下,1px的厚度代表了边界宽度属性值。这个值可以是任何一个单位的数值,以及几个命名的值:薄、中间和厚。接下来,固体是边界风格值,它定义了元素周围的线条将如何出现,在这种情况下作为一个固体的连续线。
将您的更改保存到styles.css,然后在网页浏览器中打开index.html。主要内容容器现在将周围有一个薄的黑色边界,这是最明显的,因为它覆盖了月球背景图像。
接下来,您可以使用边界属性通过将亮点和阴影应用到一个元素来创建深度感,您可以通过在一侧使用比背景颜色更轻的方向边界,然后在邻近侧使用更暗的颜色来实现。
在文本编辑器中返回styles.css,然后转到.disclosure-header类选择器块。在背景属性上的linear-gradient()定义了一个黑色紫色梯度过渡到稍微更暗的阴影。 要创建比梯度本身更多的深度,请用以下代码调整边界:
1[label styles.css]
2...
3.disclosure-header {
4 background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
5 padding: 2rem 0.5rem;
6 text-align: center;
7 color: hsl(300, 50%, 95%);
8 border-top: 1px solid hsl(300, 50%, 35%);
9 border-bottom: 1px solid hsl(300, 50%, 5%);
10}
11...
您添加了一个具有1px固体 hsl(300, 50%, 35%)值的边界顶部属性,这比起始梯度值略轻。
将您的更改保存到styles.css,然后返回浏览器并更新index.html。紫色标题背景现在有一个轻微的紫色亮点在标题的顶部运行,并在底部有一个轻微的阴影。
由于边界是一个短语属性,您可以添加额外的长语属性。可以应用一个边界,定义两个按钮类的宽度和风格,而一个边界颜色可以应用于每个类。
要开始使用border-color,请在文本编辑器中打开styles.css。在.button的选择块中,添加一个具有1px固体值的border属性,然后为.button-primary和.button-secondary添加一个border-color属性:
1[label styles.css]
2...
3.button {
4 ...
5 border: 1px solid;
6}
7...
8.button-primary {
9 background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
10 border-color: hsl(200, 100%, 15%);
11}
12.button-primary:hover {
13 background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
14 border-color: hsl(200, 100%, 10%);
15}
16.button-secondary {
17 background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
18 border-color: hsl(200, 10%, 15%);
19}
20.button-secondary:hover {
21 background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
22 border-color: hsl(200, 10%, 10%);
23}
这将为两个按钮定义一个1px宽度的固态风格边界,然后您添加了一个边界颜色属性,以自定义.button-primary、.button-secondary和其相关的:hover状态选择器的颜色。
将这些更改保存到styles.css,然后在您的网页浏览器中刷新页面. 如下图像所示,按钮现在有更多的定义,由相应的暗色边界提供:
最后,每个边界方向也是一个短语,这意味着宽度、风格和颜色可以应用于一个方向属性,例如,长语属性边界右侧颜色只会应用于右侧边界的颜色。
若要使用这些远程的边界属性,请返回文本编辑器中的styles.css。 进入.legal-content选项块,为四个边界侧设置宽度和风格,然后定制每个侧的颜色:
1[label styles.css]
2...
3.legal-contents {
4 height: 50vh;
5 max-height: 20rem;
6 margin-top: 1.5rem;
7 overflow: auto;
8 background-color: white;
9 border: 1px solid;
10 border-top-color: hsl(0, 0%, 65%);
11 border-bottom-color: hsl(0, 0%, 100%);
12 border-right-color: hsl(0, 0%, 80%);
13 border-left-color: hsl(0, 0%, 80%);
14 padding: 0.75rem;
15 font-family: "Times New Roman", serif;
16}
17...
在此代码中,您在文件的末尾添加了border: 1px solid。之后,您还创建了border-top-color,border-bottom-color,border-right-color和border-left-color属性。
将您的更改保存到styles.css,然后在浏览器中重新加载页面。可滚动的内容容器现在在顶部有深灰色边界,侧面有稍微轻灰色,底部有白色边界。
在本节中,您使用了边界属性及其各种长边变异,您创建了几个边界,根据需要应用到不同的侧面,在下一节中,您将使用边界半径属性,允许容器的角落被圆形。
使用边境射线
圆的角落在边界半径属性完成任务之前就一直是网上的设计美学,该属性可以接受任何数字单位或百分比值,并且是一种简短的属性,如边界或粘贴属性,这意味着每个角落可以根据需要单独调整。
要开始使用边界半径属性,请在文本编辑器中打开styles.css。 进入.disclosure-alert选项块和border-radius属性,然后将值设置为1.5rem,该值将应用到属性的四个角落。
1[label styles.css]
2...
3.disclosure-alert {
4 ...
5 border: 1px solid hsl(0, 0%, 0%);
6 border-radius: 1.5rem;
7}
8...
将此添加到 styles.css,然后在 Web 浏览器中打开或刷新 `index.html。 只有下面的两个角落会出现圆形,而前面的两个角落将保持指向边缘。
只有两个圆的角落可见的原因是由于下层元素在网络上相互作用的方式。浏览器在保持内容可见方面犯错误。.disclosure-alert 确实有四个圆的角落,但由于.disclosure-header 位于元素内部,没有圆的角落,它重叠了圆的角落。一个快速的解决方案是将 overflow: hidden 添加到 .disclosure-alert,导致容器剪切任何下层容器和内容。
要调整重叠的角落,请返回文本编辑器中的styles.css。 转到.disclosure-header选项块并添加border-radius属性,因为只有前两个角落需要调整,所以值将是1.5rem 1.5rem 0 0:
1[label styles.css]
2...
3.disclosure-header {
4 ...
5 border-top: 1px solid hsl(300, 50%, 35%);
6 border-bottom: 1px solid hsl(300, 50%, 5%);
7 border-radius: 1.5rem 1.5rem 0 0;
8}
9...
此值的扩展格式将对左上角和右上角应用一个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到1.375rem的border-radius值要更改,如下代码块所示:
1[label styles.css]
2...
3.disclosure-header {
4 background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
5 padding: 2rem 0.5rem;
6 text-align: center;
7 color: hsl(300, 50%, 95%);
8 border-top: 1px solid hsl(300, 50%, 35%);
9 border-bottom: 1px solid hsl(300, 50%, 5%);
10 border-radius: 1.375rem 1.375rem 0 0;
11}
12...
将此更改保存到styles.css,然后在 Web 浏览器中刷新页面. 白色图像已经消失,两种元素的曲线在适当的地方相遇。
最后,你会将一个圆形的角落应用于主容器底部的按钮. 这些按钮将具有片形状,具有长,平的顶部和底部和完全圆形的侧面。
要创建一个平板按钮,请在文本编辑器中打开styles.css。在.button选择器块中,添加边界半径属性,然后将该值设置为2rem。这可能是一个任意的数字,只要它大于计算高度,则将字体大小,线高,粘贴和边界宽的组合,可以影响元素的总体高度。以下代码块中突出的CSS显示了如何添加此属性:
1[label styles.css]
2...
3.button {
4 ...
5 border: 1px solid;
6 border-radius: 2rem;
7}
8...
关于这种方法,有两点要注意:第一,在这个元素上没有设置高度值。 应该避免设置高度值,因为内容可以并将处于容器外流的位置。 通过避免设置高度,按钮可以生长,以匹配总内容。 第二,这不会与基于百分比的值正确工作。 基于百分比的值在边界半径属性曲线上流动到高度和宽度的百分比,导致圆形形形状而不是圆形角落。
将您的更改保存到styles.css,然后返回浏览器并更新index.html。
在本节中,您使用边界半径属性将圆角应用于多个元素,发现边界半径不会阻止下行元素离开弯曲的空间。
使用text-shadow属性
将阴影应用于文本在日常Web开发中有很多用途。阴影可以创建深度、闪光效果或帮助文本在可能被忽视的地方脱颖而出。
文本阴影属性由最多四个值组成:x轴偏差,y轴偏差,模糊半径和颜色.例如,这些值可以看起来像这样: 2px 4px 10px 红色. 在这四个值中,只需要偏差值。
要开始使用text-shadow,你将开始在头部创建一个闪光效果。在文本编辑器中打开styles.css,然后进入.disclosure-header类选择器。
1[label styles.css]
2...
3.disclosure-header {
4 ...
5 border-radius: 1.375rem 1.375rem 0 0;
6 text-shadow: 0 0 0.375rem hsl(300, 50%, 50%);
7}
8...
闪光效果意味着颜色将来自文本的每个边缘,所以x和y轴的抵消值在这里设置为0。您将闪光的闪光设置为0.375rem(相当于6px)以给文本一个微妙的色调。
将此添加到您的styles.css文件中。接下来,在网页浏览器中打开index.html。紫色梯度背景上的大胆标题文本现在围绕着它闪烁着中紫色。
接下来,可以将多个阴影放置在文本元素上,允许在文本上创建一个呈现的效果. 这种效果通过在对象底部放置一个轻色的阴影,而上面放置一个暗色的阴影来实现。
要创建显示效果,请返回到文本编辑器中的styles.css。 效果将被添加到容器底部的按钮中。 对于.button-primary,.button-primary:hover,.button-secondary和.button-secondary:hover选项,请添加一个text-shadow属性。 查看以下代码块中的突出 CSS 值:
1[label styles.css]
2...
3.button-primary {
4 border: 1px solid hsl(200, 100%, 5%);
5 background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
6 text-shadow: 0 1px hsl(200, 100%, 50%),
7 0 -1px hsl(200, 100%, 5%);
8}
9.button-primary:hover {
10 border: 1px solid hsl(200, 100%, 0%);
11 background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
12 text-shadow: 0 1px hsl(200, 100%, 45%),
13 0 -1px hsl(200, 100%, 0%);
14}
15.button-secondary {
16 border: 1px solid hsl(200, 10%, 5%);
17 background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
18 text-shadow: 0 1px hsl(200, 10%, 50%),
19 0 -1px hsl(200, 10%, 5%);
20}
21.button-secondary:hover {
22 border: 1px solid hsl(200, 10%, 0%);
23 background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
24 text-shadow: 0 1px hsl(200, 10%, 45%),
25 0 -1px hsl(200, 10%, 0%);
26}
第一种阴影是更轻的底部插入亮点。这是用0 1px偏差,然后是背景偏差颜色的更轻版本。接下来,你用0 -1px偏差创建了文本上方的阴影,将阴影拉到1px并使用更暗的背景颜色变异。
将这些更改保存到styles.css,然后在您的 Web 浏览器中更新页面。按钮内部的文本现在在文本下方有一点亮点,在文本上方有一点阴影。
在本节中,您将文本阴影属性应用到几个元素中,您在标题上创建了闪光效果,并在按钮上创建了多种阴影效果。
将box-shadow添加到元素
正如文本阴影属性允许文本内容具有阴影一样,盒子阴影属性允许元素和容器也有阴影一样。
要开始使用box-shadow属性,请在文本编辑器中打开styles.css。在.disclosure-alert选项块中,添加box-shadow属性。就像text-shadow一样,需要对x和y轴的抵消值,如果没有提供颜色,则使用color属性值。对于这个第一个box-shadow,设置抵消值为0,模糊值为0.5rem,颜色为hsl(300,40%,5%),如下列代码块所示:
1[label styles.css]
2...
3.disclosure-alert {
4 ...
5 border-radius: 1.5rem;
6 text-shadow: 0 0 0.375rem hsl(300, 50%, 50%);
7 box-shadow: 0 0 0.5rem hsl(300, 40%, 5%);
8}
9...
将更改保存到styles.css,并在您的 Web 浏览器中更新页面. 现在有一个近乎黑色阴影从容器中传播出来。 另外,请注意,阴影尊重并遵循您用边界半径属性创建的曲线。 下面的图像显示了浏览器中如何渲染:
接下来,回到styles.css并开始创建一个更复杂的效果,将两个额外的大光效应添加到盒子阴影。在每个新阴影之间添加一个子,每个阴影设置为0.5rem的y轴偏差。
1[label styles.css]
2...
3.disclosure-alert {
4 ...
5 box-shadow: 0 0 0.5rem hsl(300, 40%, 5%),
6 0 0.5rem 6rem hsl(200, 40%, 30%),
7 0 0.5rem 10rem hsl(300, 40%, 30%);
8}
9...
这些阴影的顺序是物质.接近黑色的第一个阴影将出现在新的阴影之上,并在下一个后面添加每一个后面的阴影。
将您的更改保存到 styles.css,并在浏览器中更新页面. 如下图所示,多个阴影的组合产生了独特的效果:
盒影属性的模糊扩散功能可用于创建深度的感觉。扩散值接受积极和负值,负值扩散与强烈的抵消和模糊相结合,产生一种感觉远离源容器的影子。
首先,回到文本编辑器中的styles.css。在.disclosure-alert选择器上的黑暗小阴影和更大的蓝色阴影之间,从代码块中添加以下突出CSS:
1[label styles.css]
2...
3.disclosure-alert {
4 ...
5 box-shadow: 0 0 0.5rem hsl(300, 40%, 5%),
6 0 6rem 4rem -2rem hsl(300, 40%, 5%),
7 0 0.5rem 6rem hsl(200, 40%, 30%),
8 0 0.5rem 10rem hsl(300, 40%, 30%);
9}
10...
此增至阴影集保持x轴偏差为0,但将y轴大大移动到6rem。接下来,模糊不像闪光一样大,但在适当的尺寸为4rem。接着,出现模糊扩散值,在这种情况下设置为2rem。扩散的默认值为0,这等于容器。在2rem,扩散将从容器内部凝聚,创造深度的视觉效果。
将您的更改保存到styles.css,然后在浏览器中刷新index.html。阴影是一种深紫色颜色,产生了主内容框在月球表面上漂浮的感觉,如下图像所示:
另一种盒子阴影的用途是创建轻微的突出和阴影泡沫效应,就像你以前在头部上的边界属性一样。使用盒子阴影而不是边界的优点是它不会影响盒子模型,从而导致内容流动的变化。它也可以与边界结合使用。
要开始在盒子阴影上使用插入值,请在文本编辑器中打开styles.css。 这个效果会被添加到按钮中,所以你会将这些风格应用到.button-primary,.button-primary:hover,.button-secondary和.button-secondary:hover。 就像text-shadow一样,这将由0 1px和0 -1px的抵消组合组成。
1[label styles.css]
2...
3.button-primary {
4 ...
5 text-shadow: 0 1px hsl(200, 100%, 50%),
6 0 -1px hsl(200, 100%, 5%);
7 box-shadow: inset 0 1px hsl(200, 100%, 50%),
8 inset 0 -1px hsl(200, 100%, 15%);
9}
10.button-primary:hover {
11 ...
12 text-shadow: 0 1px hsl(200, 100%, 45%),
13 0 -1px hsl(200, 100%, 0%);
14 box-shadow: inset 0 1px hsl(200, 100%, 45%),
15 inset 0 -1px hsl(200, 100%, 10%);
16}
17.button-secondary {
18 ...
19 text-shadow: 0 1px hsl(200, 10%, 50%),
20 0 -1px hsl(200, 10%, 5%);
21 box-shadow: inset 0 1px hsl(200, 10%, 50%),
22 inset 0 -1px hsl(200, 10%, 15%);
23}
24.button-secondary:hover {
25 ...
26 text-shadow: 0 1px hsl(200, 10%, 45%),
27 0 -1px hsl(200, 10%, 0%);
28 box-shadow: inset 0 1px hsl(200, 10%, 45%),
29 inset 0 -1px hsl(200, 10%, 10%);
30}
将这些更改保存到styles.css,然后在浏览器中刷新index.html。按钮现在有亮点和阴影,类似于文本。这与梯度背景相结合,为按钮创建了一个简单但鲜明的效果。下面的图像显示了浏览器中如何渲染:
最后,您还可以将模糊的扩散值应用到插入的阴影中。扩散将模糊的起始点从边缘移动到外面,但使用插入时,扩散将起始点移动到内部,这意味着当在插入上应用负值的扩散时,阴影将扩展到元素的视觉区域之外。扩展到外面可以创建一个看起来像短梯度的阴影。
要开始创建此效果,请在文本编辑器中打开styles.css。 导航到.legal-contents类选择器并添加一个box-shadow属性。 此阴影将由三种阴影组成。 第一种阴影将围绕整个容器的内部设置一个短的阴影,接下来的两种将为元素的顶部和底部提供一个长长的光阴。 以下代码块中的突出CSS显示了如何设置:
1[label styles.css]
2...
3.legal-contents {
4 ...
5 font-family: "Times New Roman", serif;
6 box-shadow: 0 0 0.25rem hsl(0, 0%, 80%) inset,
7 0 4rem 2rem -4rem hsl(0, 0%, 85%) inset,
8 0 -4rem 2rem -4rem hsl(0, 0%, 85%) inset;
9}
10...
将您的更改保存到 styles.css,然后在浏览器中更新页面. 影子现在正在创建一个效果,使法律文本看起来像一个窗口进入容器。
在本节中,您将盒影属性应用于实践中,您还使用了盒影的模糊散布和插入功能,以允许更多的风格选项。
使用outline财产
影响元素边缘的最后一个属性是边缘属性. 在所有浏览器中,元素的:focus状态是使用outline属性创建的。然而,每个浏览器的默认:focus风格的实现有很大差异。outline属性与border属性相似,除了两个关键差异:它没有方向性属性变异,并且不会影响框模型。这两个差异中的最后一个使得它非常适合:focus风格,因为它提供了积极元素的视觉指标,而不会扰乱内容流。
若要观察浏览器的:focus状态的默认状态,请在浏览器中打开index.html。 使用TAB键导航页面,直至底部按钮中有一个为焦点。 根据您正在使用的浏览器,您可能无法看到默认的:focus风格。 例如,Firefox 显示了一个白点的框架,但在轻灰色背景下无法感知。 以下图像从左到右显示了默认焦点风格在 Firefox、Safari 和 Chrome 中如何显示:
要开始使用outline属性定制自己的:focus状态,请在文本编辑器中打开styles.css。
1[label styles.css]
2...
3.button {
4 ...
5}
6.button:focus {
7 outline: 0.25rem solid hsl(200, 100%, 50%);
8}
9...
与边界属性一样,边界的值包括宽度、风格和颜色值,因为焦点状态的目的是将注意力集中在一个元素上,因此宽度增加到0.25rem,相当于4px。接下来,您将风格设置为固态,使焦点状态更类似于Safari和Chrome。
将您的更改保存到styles.css,然后返回浏览器并更新页面。 浏览器再次确定outline的渲染方式。 下面的图像显示了这些风格在Firefox、Safari和Chrome中从左到右的样子:
在所有三种浏览器中,outline属性都以完全不同的方式显示。Firefox紧紧地围绕着按钮的整个圆形形状。Safari创建了一个右角框,但触及按钮的边缘。
要在所有浏览器中创建一个看起来像Firefox的风格,需要使用框影而不是外线。
要开始创建一个更自定义的 :focus 状态,请在文本编辑器中返回你的 styles.css 文件. 首先要做的是将浏览器的默认 outline 风格禁用,将 .button:focus 选择器的 outline 值更改为 none,如下列代码块所示:
1[label styles.css]
2...
3.button {
4 ...
5}
6.button:focus {
7 outline: none;
8}
9...
接下来,转到按钮-主要:hover和按钮-次要:hover选项,并添加一个字符串,然后是:focus状态变量,如下列代码块所示:
1[label styles.css]
2...
3
4.button-primary {
5 ...
6}
7.button-primary:hover,
8.button-primary:focus {
9 ...
10}
11.button-secondary {
12 ...
13}
14.button-secondary:hover,
15.button-secondary:focus {
16 ...
17}
最后,为每个按钮的 :focus、 .button-primary: focus 和 .button-secondary:focus 创建两个新的选择器。在新的选择器块中,添加一个新的 box-shadow 属性,从它们的 :hover, :focus 对手中插入相同的阴影。然后,将另一个阴影添加到系列中,并将全部设置为 0。然后,添加一个 0.25rem 的扩散,从而在元素周围创建一个坚固的,不模糊的线条。最后,将相同的颜色添加到两种实例中。下面的代码块中的突出 CSS 显示了如何写:
1[label styles.css]
2...
3
4.button-primary {
5 ...
6}
7.button-primary:hover,
8.button-primary:focus {
9 ...
10}
11.button-primary:focus {
12 box-shadow: inset 0 1px hsl(200, 100%, 45%),
13 inset 0 -1px hsl(200, 100%, 10%),
14 0 0 0 0.25rem hsl(200, 100%, 50%);
15}
16.button-secondary {
17 ...
18}
19.button-secondary:hover,
20.button-secondary:focus {
21 ...
22}
23.button-secondary:focus {
24 box-shadow: inset 0 1px hsl(200, 10%, 45%),
25 inset 0 -1px hsl(200, 10%, 10%),
26 0 0 0 0.25rem hsl(200, 100%, 50%);
27}
将这些更改保存到styles.css并返回浏览器以更新index.html。现在,当您使用TAB键导航页面时,无论浏览器是什么样子,按钮上的:focus风格将看起来相同。
此最后一节介绍了outline属性以及每个浏览器如何以不同的方式使用它. 至少需要一个:focus指标来实现可访问性,而outline属性完成了工作。
结论
格式化元素的边缘允许网站的设计获得差异性和注意力。边界属性可以帮助提供内容之间的定义和分离。边界半径属性软化了美学,有助于定义设计的态度。文本和框架上的阴影带来了深度,有助于引起内容的关注。最后,边界属性提供了可访问的方式来吸引注意力,以键盘为焦点。在本教程中,您使用了所有这些属性来创建一个视觉上有趣和可用的网页。了解每个属性以及如何和何时使用它们将有助于解决各种前端界面问题并创造新的体验。
如果您想阅读更多 CSS 教程,请尝试 How To Style HTML with CSS series中的其他教程。