<meta charset="utf-8">

使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度

RGBA 颜色值设置背景色而不是文本的不透明度

background-position 属性用于指定背景图像的位置。

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

指定应该固定背景图像：background-attachment: fixed;

指定背景图像应随页面的其余部分一起滚动：background-attachment: scroll;

在使用简写属性时，属性值的顺序为：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

border-style 属性指定要显示的边框类型。

允许以下值：

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框

border 属性是以下各个边框属性的简写属性：

• border-width
• border-style（必需）
• border-color

border-radius 属性用于向元素添加圆角边框

auto 值

您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

inherit 值

本例使 <p class="ex1"> 元素的左外边距继承自父元素（<div>）：

实例

使用 inherit 值：

div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; }

使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

CSS 轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

除非设置了 outline-style 属性，否则其他轮廓属性都不会有任何作用！

使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

下例指定边框边缘外 25px 的轮廓：

此段落的边框外有 25px 的轮廓。

实例

p { margin: 50px; border: 1px solid black; outline: 1px solid red; outline-offset: 25px; }

text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的

direction 和 unicode-bidi 属性可用于更改元素的文本方向：

实例

p { direction: rtl; unicode-bidi: bidi-override; }

vertical-align 属性设置元素的垂直对齐方式。

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写

text-indent 属性用于指定文本第一行的缩进

letter-spacing 属性用于指定文本中字符之间的间距

line-height 属性用于指定行之间的间距

word-spacing 属性用于指定文本中单词之间的间距

white-space 属性指定元素内部空白的处理方式

text-shadow 属性为文本添加阴影。

在 CSS 中，有五个通用字体族：

• 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
• 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
• 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
• 草书字体（Cursive）- 模仿了人类的笔迹。
• 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

font-family 属性规定文本的字体。

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

• normal - 文字正常显示
• italic - 文本以斜体显示
• oblique - 文本为“倾斜”

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本

cursor 属性指定要显示的光标类型

list-style-image 属性将图像指定为列表项标记

list-style-position 属性指定列表项标记（项目符号）的位置。

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本

border-collapse 属性设置是否将表格边框折叠为单一边框

如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换

z-index 属性指定元素的堆栈顺序

overflow 属性可设置以下值：

• visible - 默认。溢出没有被剪裁。内容在元素框外渲染
• hidden - 溢出被剪裁，其余内容将不可见
• scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
• auto - 与 scroll 类似，但仅在必要时添加滚动条

overflow 属性仅适用于具有指定高度的块元素

设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。