与框模型装饰相关的CSS属性
本文解释了与框模型装饰相关的CSS属性。
您可以学习如何编写诸如边框和阴影之类的属性。
YouTube Video
预览的HTML
css-decoration.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-decoration.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>Box Decoration Related CSS Properties Example</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Box Decoration</h2>
20 </header>
21 <article>
22 <h3>border</h3>
23 <section>
24 <header><h4>border: 3px solid #333</h4></header>
25 <section class="sample-view">
26 <div class="border-solid">Solid Border</div>
27 </section>
28 <header><h4>border: 3px dashed #666</h4></header>
29 <section class="sample-view">
30 <div class="border-dashed">Dashed Border</div>
31 </section>
32 <header><h4>border: 5px double #999</h4></header>
33 <section class="sample-view">
34 <div class="border-double">Double Border</div>
35 </section>
36 <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
37 <section class="sample-view">
38 <div class="border-rounded">Rounded Border</div>
39 </section>
40 </section>
41 </article>
42
43 <article>
44 <h3>border-radius</h3>
45 <section>
46 <header><h4>border-radius: 20px</h4></header>
47 <section class="sample-view">
48 <div class="border-radius-all-rounded">All corners rounded</div>
49 </section>
50 <header><h4>border-top-left-radius: 20px</h4></header>
51 <section class="sample-view">
52 <div class="border-radius-top-left-rounded">Top-left rounded</div>
53 </section>
54 <header><h4>border-radius: 50px / 25px</h4></header>
55 <section class="sample-view">
56 <div class="border-radius-ellipse-corners">Ellipse corners</div>
57 </section>
58 </section>
59 </article>
60
61 <article>
62 <h3>outline</h3>
63 <section>
64 <h4>Outline Examples</h4>
65 <header><h4>outline: 2px solid red</h4></header>
66 <section class="sample-view">
67 <div class="outline-solid">Solid Red Outline</div>
68 </section>
69 <header><h4>outline: 3px dashed blue</h4></header>
70 <section class="sample-view">
71 <div class="outline-dashed">Dashed Blue Outline</div>
72 </section>
73 <header><h4>outline: 4px double green</h4></header>
74 <section class="sample-view">
75 <div class="outline-double">Double Green Outline</div>
76 </section>
77 <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
78 <section class="sample-view">
79 <div class="outline-offset">Outline with Offset</div>
80 </section>
81 </section>
82 </article>
83
84 <article>
85 <h3>box-shadow</h3>
86 <section>
87 <h4>Box Shadow Examples</h4>
88 <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
89 <section class="sample-view">
90 <div class="box-shadow-basic-shadow">Basic Shadow</div>
91 </section>
92 <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
93 <section class="sample-view">
94 <div class="box-shadow-inset-shadow">Inset Shadow</div>
95 </section>
96 <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
97 <section class="sample-view">
98 <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
99 </section>
100 </section>
101 </article>
102 </main>
103</body>
104</html>装饰
border属性
1.border-solid, .border-dashed, .border-double, .border-rounded {
2 background-color: lightsteelblue;
3}
4
5.border-solid {
6 border: 3px solid #333;
7}
8
9.border-dashed {
10 border: 3px dashed #666;
11}
12
13.border-double {
14 border: 5px double #999;
15}
16
17.border-rounded {
18 border: 2px solid #000;
19 border-radius: 15px;
20}border属性在CSS中用于设置元素的边框。border由三个部分组成：宽度、样式和颜色。它们结合在一起设置元素的边框。
border的基本结构
1/* Shorthand syntax */
2border: [border-width] [border-style] [border-color];
3
4/* Example of border property */
5border: 5px solid white;
6
7/* Example of individual properties */
8border-width: 5px;
9border-style: solid;
10border-color: black;-
使用
border-width来指定边框的厚度。单位可以用px、em、%等表示。 -
使用
border-style来指定边框的类型。您可以指定以下值。- 样式值：
none（无边框）solid（实线）dotted（点线）dashed（虚线）double（双线）groove（凹槽线）ridge（凸脊线）inset（内凹阴影线）outset（外凸阴影线）
- 样式值：
使用border-color指定边框的颜色。颜色可以使用颜色名称、rgb()、rgba()、hex等表示。
每边的单独设置
1.box {
2 border-top: 3px solid red; /* Top border: 3px solid red */
3 border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4 border-bottom: 2px double green; /* Bottom border: 2px double green */
5 border-left: 1px dotted black; /* Left border: 1px dotted black */
6}您还可以为每一边设置不同的样式，如下所示。
宽度、样式和颜色的单独设置
1.box {
2 /* Specify border width for top, right, bottom, and left */
3 border-width: 2px 4px 6px 8px;
4
5 /* Specify border style for top, right, bottom, and left */
6 border-style: solid dotted dashed double;
7
8 /* Specify border color for top, right, bottom, and left */
9 border-color: red green blue yellow;
10}您还可以分别使用 border-width、border-style 和 border-color 来单独设置每个方面。
与border-radius结合使用
1.box-rounded {
2 border: 2px solid #000;
3 border-radius: 10px; /* Round corners by 10px */
4}使用border-radius属性，您可以将边框的角变圆。
border-radius 属性
1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
2 background-color: lightsteelblue;
3}
4
5/* Round all corners */
6.border-radius-all-rounded {
7 border-radius: 20px;
8}
9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12 border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17 border-radius: 50px / 25px;
18}border-radius属性用于将元素的角变圆。您可以平滑地弯曲HTML元素的四个角，将矩形或方形转变为圆角设计。
解释：
- **
border-radius-all-rounded**类使所有角都圆化为20像素，形成一个平滑的圆角框。 - **
border-radius-top-left-rounded**类仅将左上角圆化为20像素，其他角保持方形。 - **
border-radius-ellipse-corners**类创建椭圆形角，形成一个水平拉伸的圆角框。
border-radius 属性的格式
1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;border-radius属性的值通常以像素或百分比指定。此外，您可以设置1到4个值。- 指定一个值使所有角均匀圆化。
- 指定两个值时，第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。
- 通过指定四个值，您可以为每个角设置不同的半径。值从左上角开始沿顺时针方向应用。
- 您也可以单独指定，例如
border-top-left-radius。
1border-radius: 50px / 25px;border-radius属性还可以单独指定垂直和水平半径以使角变成椭圆形。在这种情况下，用/分隔。- 例如，指定
50px / 25px会使水平半径为50像素，垂直半径为25像素。
- 例如，指定
总结
- **
border-radius**是一个用于将元素角变圆的属性。 - 您可以用像素或百分比指定角的圆度，应用于所有角、特定角，或使其成为椭圆形。
- 这对于灵活的设计和定制用户界面非常有用。
outline 属性
1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
2 background-color: lightsteelblue;
3}
4
5.outline-solid {
6 outline: 2px solid red;
7}
8
9.outline-dashed {
10 outline: 3px dashed blue;
11}
12
13.outline-double {
14 outline: 4px double green;
15}
16
17.outline-offset {
18 outline: 2px solid purple;
19 outline-offset: 10px;
20}outline 是一个 CSS 属性，用于设置围绕元素绘制的线。
outline 类似于 border，但在以下几点有所不同：。
outline不影响元素的盒模型，因此不会对元素的布局产生影响。- 由于
outline绘制在元素之外，因此它显示在border的外面。 border绘制在元素内部，因此它可能影响元素的大小和布局。
在此示例中，outline 属性设置如下：。
outline-solid类设置一个 2px 厚的实线红色轮廓。outline-dashed类设置一个 3px 蓝色虚线轮廓。outline-double类设置一个 4px 厚的绿色双线轮廓。outline-offset类设置轮廓与元素之间 10px 的间距。
基本语法
1element {
2 outline: outline-width outline-style outline-color;
3 outline-offset: 10px;
4}outline-width
outline-width用于指定轮廓的厚度。- 您可以指定例如
thin、medium、thick等值，或使用px、em等单位。
outline-style
outline-style用于指定轮廓的样式。- 您可以指定
solid、dotted、dashed、double、groove、ridge、inset、outset、none等样式。
outline-color
outline-color用于指定轮廓的颜色。- 您可以使用名称、HEX、RGB 等指定任何颜色。
outline-offset
outline-offset用于指定轮廓与元素之间的距离。- 您可以使用
px、em等单位指定精确的值。
box-shadow 属性
1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
2 background-color: lightsteelblue;
3}
4
5/* Basic shadow */
6.box-shadow-basic-shadow {
7 box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
8}
9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12 box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18 -5px -5px 10px rgba(255, 0, 0, 0.5);
19}box-shadow 属性用于为元素添加阴影。通过使用此属性，你可以在元素周围创建阴影，以表达一定的立体感和深度感。
解释：
-
在
box-shadow-basic-shadow类中，一个模糊的黑色阴影显示在元素的右下方。 -
在
box-shadow-inset-shadow类中，一个模糊的阴影显示在元素内部。通过将阴影向内置入，你可以实现一种凹陷的设计效果。 -
在
box-shadow-multiple-shadow类中，会为元素应用两个阴影，分别是黑色和红色。由于这些阴影显示在不同的位置，因此实现了三维效果。
box-shadow 属性格式
1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];各值的含义
第一个 horizontal offset 是水平偏移值，指定阴影相对于元素左侧的位置。指定一个正值会使阴影位于右侧，指定一个负值会使阴影位于左侧。
第二个 vertical offset 是垂直偏移值，指定阴影相对于元素顶部的位置。指定一个正值会使阴影位于下方，指定一个负值会使阴影位于上方。
第三个 blur radius 是模糊半径值，用于指定阴影的模糊程度。值越大，阴影扩散的范围越大，结果就是阴影更加模糊。指定一个正值会使阴影位于下方，指定一个负值会使阴影位于上方。这是可选的，默认值为 0，表示阴影没有模糊效果。
第四个 spread radius 是扩展范围值，用于指定阴影的扩展范围。指定一个正值会使阴影变大，而指定一个负值会使阴影缩小。此值也是可选的。
第五个 color 是颜色值，指定阴影的颜色。颜色可以使用颜色名称、RGB、HEX、HSL 或 CSS 中支持的其他颜色模型进行设置。如果省略，将使用元素的默认文本颜色（color 属性的值）。
你也可以优先指定 inset 关键字。指定 inset 关键字会在元素的内部绘制阴影，而不是外部。还可以使用逗号分隔设置多个阴影。
box-shadow 的示例
基本阴影示例
1div {
2 box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}- 水平偏移为
10px，在右侧创建 10 像素的阴影。 - 垂直偏移为
10px，在下方创建 10 像素的阴影。 - 模糊半径为
5px，生成 5 像素的阴影模糊效果。 - 颜色为
rgba(0, 0, 0, 0.5)，呈现半透明的黑色。
内阴影示例
1div {
2 box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}- 使用
inset可在元素内部绘制阴影。
多重阴影示例
1div {
2 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}- 您可以设置多个阴影，并用逗号分隔。在此示例中，应用了两个阴影：一个黑色阴影和一个红色阴影。
总结
box-shadow是用于为元素添加阴影以创建深度感的属性。- 通过结合水平和垂直偏移、模糊、扩展半径和颜色，可以实现多种效果。
- 您可以使用
inset在元素内部绘制阴影，还可以同时设置多个阴影。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。