在当今的网页设计领域，CSS3已经成为一个不可或缺的技能。虽然很多人都已经了解了CSS3的一些基本用法，但是一些更加深入的知识点可能并不为人所知。在本文中，我们将一起探究一些CSS3比较冷门的知识点，这些知识点可以让你的网页设计更加酷炫。
本文会不定时的更新补充

选择作为其父元素的最后一个子元素的元素。

last-child是CSS中的一个伪类选择器，用于选择某个元素的最后一个子元素。它可以用来对最后一个子元素应用特定的样式。

具体来说，:last-child选择器会匹配父元素中的最后一个子元素，无论这个子元素是什么类型。它不考虑其他兄弟元素的类型或数量，只关注最后一个子元素。

例如，如果有一个ul元素，其中包含多个li元素，我们可以使用:last-child选择器来选择最后一个li元素，并对其应用特定的样式。示例代码如下：
ul li:last-child {
  color: red;


}
上述代码会将最后一个li元素的文本颜色设置为红色。

需要注意的是，:last-child选择器只会选择父元素中的最后一个子元素，而不会考虑其他兄弟元素的类型或数量。如果父元素中的最后一个子元素不满足选择器的条件，那么选择器将不会匹配任何元素。

此外，还有一个类似的选择器叫做:last-of-type，它会选择父元素中最后一个指定类型的子元素。与:last-child选择器不同的是，:last-of-type选择器只会考虑同类型的子元素，而不会考虑其他类型的兄弟元素。

总结一下，:last-child选择器用于选择父元素中的最后一个子元素，而:last-of-type选择器用于选择父元素中最后一个指定类型的子元素。它们都可以用来对最后一个子元素应用特定的样式。

选择作为其父元素的第一个子元素的元素

first-child 是 CSS 伪类选择器之一，用于选择某个元素的第一个子元素。它可以应用于任何元素，包括块级元素和内联元素。

使用:first-child 选择器时，它会匹配作为其父元素的第一个子元素的元素。这意味着如果一个元素是其父元素的第一个子元素，那么它就会被选择。

下面是一个示例，展示了如何使用:first-child 选择器：
<ul>
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
</ul>
li:first-child {
  color: red;


}
在上面的示例中，:first-child 选择器被应用于 <li> 元素，它会选择第一个列表项，并将其文本颜色设置为红色。

需要注意的是，:first-child 选择器只会选择作为其父元素的第一个子元素的元素。如果有其他元素在它之前，即使它是第一个 <li> 元素，也不会被选择。

此外，还有其他类似的伪类选择器，如 :last-child、:nth-child(n) 等，它们可以用于选择其他位置的子元素。这些选择器可以帮助我们更精确地选择和样式化特定位置的元素。

当前获得焦点的元素

focus 是 CSS 中的一个伪类选择器，用于选中当前获取焦点的元素。当用户点击或通过键盘导航到一个可交互元素时，该元素就会获取焦点。:focus 可以用于为获取焦点的元素添加样式或执行特定的操作。

使用 :focus 可以为获取焦点的元素设置样式，比如改变元素的背景色、边框样式、文本颜色等。例如，可以通过以下方式为获取焦点的输入框添加一个蓝色的边框：
input:focus {
  border: 2px solid blue;
}
除了样式上的改变，:focus 还可以与其他伪类选择器结合使用，实现更复杂的效果。例如，可以使用 :focus + :hover 来定义当元素获取焦点且鼠标悬停在其上时的样式。

:focus 还可以与 JavaScript 事件结合使用，实现交互效果。通过监听元素的 focus 事件，可以在元素获取焦点时执行特定的操作，比如显示一个下拉菜单或弹出一个提示框。

需要注意的是，:focus 只能应用于可交互元素，比如链接、按钮、输入框等。对于非交互元素，如 div、p 等，是无法获取焦点的，因此也无法使用 :focus。

总结来说，:focus 是 CSS 中的一个伪类选择器，用于选中当前获取焦点的元素。它可以用于为获取焦点的元素添加样式或执行特定的操作，实现更好的用户交互效果。

已访问过的链接。

CSS中，:visited是一个伪类选择器，用于选择已访问过的链接的样式。当用户点击并访问过一个链接后，该链接将被视为已访问过的链接。

:visited选择器可以用于改变已访问链接的样式，以便用户可以清楚地看到他们已经访问过的页面。通过改变链接的颜色、背景色、字体样式等，可以提供更好的用户体验。

然而，由于安全和隐私的原因，浏览器对:visited选择器进行了限制。为了防止恶意网站通过检测链接的样式来获取用户的浏览历史，浏览器只允许对:visited选择器使用一些基本的样式属性，如颜色、背景色、边框颜色等。其他属性，如宽度、高度、内外边距等，将被禁止使用。

这种限制是为了保护用户的隐私和安全，防止恶意网站通过检测链接的样式来获取用户的个人信息。因此，在使用:visited选择器时，需要注意遵守浏览器的限制，以确保用户的隐私和安全。

选中被激活的元素

CSS的:active伪类用于选中被激活的元素，即当用户点击或按下鼠标按钮时，元素处于活动状态。:active伪类通常与链接元素一起使用，以在用户点击链接时提供视觉反馈。

当用户点击一个链接时，:active伪类会应用于该链接元素。这意味着可以通过为:active伪类设置样式来改变链接的外观。例如，可以改变链接的颜色、背景色或者添加其他效果，以提供点击反馈。

下面是一个示例，展示了如何使用:active伪类来改变链接的颜色：
a:active {
  color: red;


}
在上面的示例中，当用户点击链接时，链接的颜色将变为红色。

需要注意的是，:active伪类只在用户点击元素时处于活动状态，一旦用户释放鼠标按钮，元素将不再处于活动状态。因此，:active伪类的样式只在元素处于活动状态时生效。

除了链接元素，:active伪类也可以应用于其他可交互元素，如按钮。通过为按钮添加:active伪类样式，可以在用户点击按钮时提供视觉反馈。

总结起来，CSS的:active伪类用于选中被激活的元素，通常与链接元素一起使用，以在用户点击链接时提供视觉反馈。可以通过为:active伪类设置样式来改变元素的外观，例如改变颜色、背景色或添加其他效果。

鼠标悬停在元素上(:hover)

:hover是CSS中的一个伪类选择器，用于指定当鼠标悬停在元素上时应用的样式。它可以应用于任何可交互的HTML元素，如链接、按钮、图像等。

当鼠标悬停在一个元素上时，:hover选择器允许开发者改变元素的外观和行为。通过使用:hover选择器，可以为用户提供更好的交互体验，使页面更具吸引力。

使用:hover选择器时，可以为元素定义不同的样式，如改变背景颜色、字体颜色、边框样式等。这些样式将在鼠标悬停时生效，并在鼠标离开时恢复到默认样式。

下面是一个示例，演示了如何使用:hover选择器来改变链接的样式：
    
css
a:hover {
  color: red;
  text-decoration: underline;
}

    
在上面的示例中，当鼠标悬停在链接上时，链接的颜色将变为红色，并且会出现下划线。

需要注意的是，:hover选择器只在鼠标悬停时生效，当鼠标离开元素时，样式将恢复到默认状态。因此，:hover选择器不能用于改变元素的持久样式，只能用于临时的交互效果。

另外，:hover选择器也可以与其他选择器组合使用，以实现更复杂的样式效果。例如，可以使用:hover选择器与:focus选择器结合，为表单元素添加交互效果。

总结起来，:hover选择器是CSS中用于指定鼠标悬停时应用的样式的伪类选择器。它可以为元素提供交互效果，使页面更具吸引力和可用性。

CSS单位

CSS单位是用于测量和定位网页元素的度量标准。它们用于指定长度、宽度、高度、字体大小等属性的值。CSS单位可以分为绝对单位和相对单位两种类型。

绝对单位：

像素（px）：像素是最常用的绝对单位，它指定一个固定的长度或宽度。像素单位在不同设备上显示的大小是相同的，但在高分辨率屏幕上可能会显得较小。

英寸（in）：英寸是物理长度单位，1英寸等于72像素。

厘米（cm）：厘米也是物理长度单位，1厘米等于37.8像素。

毫米（mm）：毫米是物理长度单位，1毫米等于3.78像素。

点（pt）：点是印刷行业常用的单位，1点等于1/72英寸。

派卡（pc）：派卡是印刷行业常用的单位，1派卡等于12点。

相对单位：

百分比（%）：百分比单位是相对于父元素的大小来计算的。例如，如果一个元素的宽度设置为50%，它将占据父元素宽度的一半。

em（em）：em单位是相对于元素的字体大小来计算的。例如，如果一个元素的字体大小设置为2em，它将是父元素字体大小的两倍。

rem（rem）：rem单位是相对于根元素（即html元素）的字体大小来计算的。它与em单位的区别在于，rem单位不会受到父元素字体大小的影响。

vw（视窗宽度）：vw单位是相对于视窗宽度的百分比来计算的。例如，如果一个元素的宽度设置为50vw，它将占据视窗宽度的一半。

vh（视窗高度）：vh单位是相对于视窗高度的百分比来计算的。例如，如果一个元素的高度设置为50vh，它将占据视窗高度的一半。

vmin（视窗宽度和高度中较小的那个）：vmin单位是相对于视窗宽度和高度中较小值的百分比来计算的。

vmax（视窗宽度和高度中较大的那个）：vmax单位是相对于视窗宽度和高度中较大值的百分比来计算的。

这些单位可以根据具体需求选择使用，相对单位通常更灵活，可以根据不同设备和屏幕大小进行自适应调整，而绝对单位则更适合需要固定大小的元素。

用户选中文本的样式

在 CSS 中， “::selection” 是一种伪元素选择器，用于指定用户选中文本的样式。当用户在页面上选择文本时，所选文本的样式可以通过 “::selection” 选择器进行设置。

通过使用 “::selection” 选择器，您可以更改所选文本的背景颜色、文本颜色等属性。

以下是一个示例，展示如何使用 “::selection” 选择器来更改所选文本的样式：
::selection {
  background-color: yellow;
  color: red;

}
上述例子中，当用户选择文本时，所选文本的背景颜色将变为黄色，并且文本颜色将变为红色。

需要注意的是，”::selection” 选择器是一个伪元素选择器，只能应用于文本选择的样式，而不能应用于其他元素的样式。

选择文本块的第一行

在CSS中，::first-line 是一个伪元素选择器，它用于选择文本块的第一行。它允许开发者对一个文本块的第一行应用特定的样式。

通过使用 ::first-line 选择器，开发者可以针对不同段落或文本块的第一行应用特定的样式规则，如改变字体、颜色、背景、间距等。这个选择器非常有用，因为它可以帮助开发者在不影响整个文本块布局的情况下，仅仅修改第一行的样式。

使用 ::first-line 选择器非常简单，只需在样式表中使用它，并在其后跟上想要应用的样式规则。下面是一个示例：
p::first-line {
  font-weight: bold;
  color: red;

  text-transform: uppercase;
}
上述示例中，所有 <p> 元素的第一行将应用粗体、红色字体和大写文本转换。

需要注意的是，::first-line 选择器只能应用于块级元素，而不能应用于行内元素。此外，如果文本块的第一行包含了一个浮动元素，::first-line 选择器将无法选择到其后的文本内容。

总之，::first-line 是一个非常有用的CSS伪元素选择器，它可以帮助开发者对文本块的第一行进行特殊样式的设置，使设计更加丰富和灵活。

选中段落中的首字母

在CSS中，::first-letter 是一个伪元素选择器，用于选择文本块中的第一个字母或字符。它可以应用特定的样式，如字体、颜色、大小等，以突出显示文本的首字符。

使用 ::first-letter 伪元素选择器时，需要选择要应用样式的父元素，然后使用 ::first-letter 来选择该父元素中的首字母。以下是使用 ::first-letter 的基本语法：

selector::first-letter {
    /* 在这里添加样式 */
}

需要注意的是，::first-letter 只能应用在块级元素的第一个字母或字符上，并且不会应用于空元素、行内元素和表格元素的第一个字母。

控制文本两端对齐方式

在CSS中，text-justify属性用于控制文本两端对齐方式。它主要适用于分散对齐文本，特别是在使用text-align: justify时。

text-justify属性有以下几个可能的取值：

auto：默认值，由浏览器自动选择对齐方式。

none：不应用文本对齐方式。

inter-word：将文本在单词之间进行分散对齐，不断调整字间距，确保每一行的文本宽度尽可能相等。

inter-ideograph：文本在汉字间进行分散对齐，类似于inter-word，但也会考虑到汉字之间的间距。

inter-cluster：文本在字符集群（字符集群可以是一个字符或多个字符）之间进行分散对齐。

distribute：将文本在字符之间进行分散对齐，而不管字符的边界。

请注意，text-justify属性仅在父元素的宽度超过其子元素的宽度时生效，并且仅适用于display: inline或display: inline-block的元素。此外，它可能不受所有浏览器的支持，因此在使用时应谨慎考虑兼容性问题。

文本首行缩进

CSS的text-indent属性用于指定文本块的首行缩进。它控制了文本块的第一行相对于文本块框的左边缘的偏移量。该属性可以应用于块级元素和浮动元素。

text-indent属性的值可以是一个正值、负值或零。正值将使首行缩进，负值将使首行悬挂缩进，而零值将取消任何缩进。

下面是一个示例，展示了如何使用text-indent属性实现首行缩进：
p {
  text-indent: 20px;
}
在上面的例子中，所有的段落元素<p>的首行都会缩进20个像素。

可以结合其他属性一起使用text-indent来控制更复杂的文本样式，例如text-align属性来设置对齐方式，或者line-height属性来设置行高。

请注意，text-indent只影响块级元素的首行，对于内联元素或者行内块元素是不起作用的。

文本内容中字母之间的间距

CSS的letter-spacing属性用于控制文本内容中字母之间的间距。它可以应用于单个字母、单词或整个文本块。

letter-spacing属性可以接受不同的单位值，包括像素（px）、百分比（%）和相对单位（em、rem）。正值会增加字母之间的间距，负值则会减小间距。

以下是一些示例：
/* 设置整个文本块的字母间距为0.1em */
p {
  letter-spacing: 0.1em;
}



/* 设置单个单词的字母间距为2px */
span {
  letter-spacing: 2px;
}



/* 设置标题的字母间距为-0.5em，减小间距 */
h1 {
  letter-spacing: -0.5em;
}
请注意，letter-spacing属性可能会被字体选择、文本布局和其他因素的影响所限制。在应用该属性时，建议预览并调整以获得最佳结果。

文本阴影

CSS的text-shadow属性用于在文本周围创建阴影效果。它允许您在文本后面添加一个或多个阴影。

以下是text-shadow属性的语法：
text-shadow: h-shadow v-shadow blur color;

h-shadow：指定阴影水平方向的偏移量。可以是正值（向右偏移）或负值（向左偏移）。

v-shadow：指定阴影垂直方向的偏移量。可以是正值（向下偏移）或负值（向上偏移）。

blur：指定阴影的模糊半径。较大的值会导致更模糊的阴影效果。

color：指定阴影的颜色。可以使用颜色名称、十六进制值或RGB值。

您可以使用这些参数组合来创建不同的文本阴影效果。例如，要在文本上创建一个黑色阴影，您可以将text-shadow设置为：text-shadow: 2px 2px 4px #000000;

您还可以通过在text-shadow属性中使用多个值来添加多个阴影效果。每个阴影之间用逗号分隔。例如，要创建一个文本上的三个阴影，可以这样写：text-shadow: 2px 2px 4px #000000, -2px -2px 4px #ffffff, 0px 0px 6px #ff0000;

请注意，text-shadow属性在支持CSS3的现代浏览器中受支持，并且对于一些老旧的浏览器可能不起作用。

控制文本装饰

CSS text-decoration是一种用于控制文本装饰效果的CSS属性。它用于添加或移除文本的下划线、删除线、上划线等效果。

在CSS中，我们可以使用text-decoration属性来设置文本的装饰效果。它有以下几个常用的取值：

none：不添加任何文本装饰效果。

underline：添加文本下划线。

overline：添加文本上划线。

line-through：添加文本删除线。

除了以上取值外，还可以使用text-decoration属性的细化取值来更精确地控制文本装饰效果。例如：

text-decoration-color：用于指定文本装饰线的颜色。

text-decoration-style：用于指定文本装饰线的样式，如实线、虚线等。

通过使用text-decoration属性，我们可以轻松地改变文本的装饰效果，以满足各种设计需求。
下面是一个示例，展示了如何使用CSS text-decoration属性来添加下划线和删除线：

文本的大小写变换

text-transform 是 CSS 的一个属性，用于控制文本的大小写变换。它可以应用于任何文本内容，包括元素的文本内容、表单字段的文本内容或伪元素的内容。该属性的值可以是以下五个关键字之一：

none：默认值，文本不进行任何大小写变换。

capitalize：将每个单词的首字母转换为大写，其他字母保持不变。

uppercase：将所有字母转换为大写。

lowercase：将所有字母转换为小写。

full-width：将所有字母转换为全角形式，适用于中文、日文或韩文等全角字符的文本。

text-transform 属性为我们提供了一种简单的方法来改变文本的大小写形式，使我们能够根据设计需要或用户需求对文本进行灵活的处理。

鼠标指针

在CSS中，cursor属性用于设置鼠标指针在元素上的样式。它可以接受多种不同的值，用于定义不同的指针样式。

以下是一些常见的cursor属性的值：

auto：浏览器自动选择适当的光标样式。

default：默认的箭头光标。

pointer：手形光标，表示链接或可点击的元素。

wait：等待样式，表示正在处理的元素。

text：文本样式，表示可以编辑的文本内容。

move：移动样式，表示可移动的元素。

col-resize：列大小调整样式，表示可水平调整宽度的元素。

help：帮助样式，表示提供帮助信息的元素。

如果您想将鼠标指针样式设置为自定义的图片，可以使用url函数来指定图片的URL。下面是设置鼠标指针为图片的示例代码：
.custom-cursor {
  cursor: url('custom-cursor.png'), auto;
}
在上面的代码中，custom-cursor.png是要使用的自定义图片的URL。首先使用url('custom-cursor.png')指定了图片的URL，然后后面的auto指定了当图片无法加载时，使用默认的光标样式。

请确保提供的图片是正确的URL，并且可以在浏览器中加载。另外需要注意的是，不同浏览器对于自定义鼠标指针的支持程度可能会有所不同。

过渡动画

CSS过渡动画是一种用于在元素属性值改变时实现平滑过渡效果的技术。它允许开发者通过在CSS样式中指定过渡属性和过渡时间来定义元素从一个状态平滑过渡到另一个状态的动画效果。

下面是一些常用的CSS属性用于创建过渡动画：

transition-property（过渡属性）：指定要进行过渡动画的CSS属性。可以是单个属性，也可以是多个属性的集合，多个属性之间用逗号分隔。

transition-duration（过渡时间）：指定过渡动画的持续时间，以秒（s）或毫秒（ms）为单位。比如transition-duration: 0.5s;表示过渡动画持续0.5秒。

transition-timing-function（过渡速度曲线）：指定过渡动画的速度曲线。可以使用预定义的速度曲线函数，例如ease, linear, ease-in, ease-out, ease-in-out等，也可以使用自定义的贝塞尔曲线函数。

transition-delay（过渡延迟）：指定过渡动画开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。
CSS过渡动画可以应用于各种属性，包括宽度、高度、位置、颜色等，帮助开发者实现更流畅的界面效果。同时，过渡动画也可以与其他CSS特性（如:hover、:focus、:active等）结合使用，以实现更丰富的交互效果。

可以通过使用以上属性来控制元素的过渡动画效果。例如：

自定义滚动条样式

在 CSS 中，可以使用伪元素选择器 ::-webkit-scrollbar 来自定义滚动条的样式。以下是一些常用的自定义滚动条样式属性：

width 和 height：设置滚动条的宽度和高度。

background-color：设置滚动条的背景色。

border-radius：设置滚动条的圆角。

thumb：滚动条的拖动块，可以使用 ::-webkit-scrollbar-thumb 选择器来自定义拖动块的样式。

track：滚动条的轨道，可以使用 ::-webkit-scrollbar-track 选择器来自定义轨道的样式。

button：滚动条两端的箭头按钮，可以使用 ::-webkit-scrollbar-button 选择器来自定义箭头按钮的样式。
请注意，上述样式只适用于使用 WebKit 内核的浏览器，如 Chrome 和 Safari。对于其他浏览器，可能需要使用不同的前缀或其他方式来自定义滚动条样式。
以下是一个示例，演示如何使用 CSS 自定义滚动条的样式：

CSS 变量

CSS 变量，也被称为自定义属性，是一种可以定义在 CSS 中可重用的值的方法。这些值可以在整个文档中使用，并且可以通过 JavaScript 动态地改变它们。

CSS 变量的语法以 -- 开头，例如 --primary-color。变量可以在声明中使用，例如 color: var(--primary-color)，也可以在 CSS 规则集内重写。要定义变量，请使用 :root 伪类或任何元素选择器。

下面是一个使用 CSS 变量的例子：
:root {
  --primary-color: #007bff;
}












.button {
  color: #fff;
  background-color: var(--primary-color);
  padding: 10px 20px;
  border-radius: 5px;
}
在这个例子中，我们定义了一个名为 --primary-color 的变量，并将其设置为蓝色。在 .button 类中，我们将 background-color 属性设置为 var(--primary-color)，这样该属性的值就会自动变成蓝色。如果想要改变 --primary-color 的值，只需要在 :root 中修改即可。

变量可以被 JavaScript 动态修改，可以使用 setProperty() 方法修改变量的值。例如，下面的代码将 --primary-color 的值设置为黄色：
document.documentElement.style.setProperty('--primary-color', 'yellow');
CSS 变量不仅能够简化我们的 CSS 代码，还能够为后期的维护和主题定制提供很大的便利性。

文本环绕图像

shape-outside 是一个 CSS 属性，用于指定一个非矩形的形状来定义一个框盒子的外部形状。这个属性通常用于实现文本环绕图像或其他非矩形元素的效果。通过示例来说明：假设有一个图片和一段文字，我们想让这段文字紧密地跟着图片的形状来排列，而不是像传统的矩形元素一样，这时候就可以用到 shape-outside 属性。
shape-outside 属性的值可以使用以下一种或多种形状（shape）或函数（function）来进行指定：

1.none – 默认值，无形状。
2.<shape-box> – 拐角矩形（rectangle）、椭圆（ellipse）、圆（circle）、多边形（polygon）等形状值。
3.margin-box – 使用指定的 margin box 来定义形状的边界。
4.padding-box – 使用指定的 padding box 来定义形状的边界。
5.border-box – 使用指定的 border box 来定义形状的边界。
6.content-box – 使用指定的 content box 来定义形状的边界。
7.initial – 恢复默认值。
8.inherit – 继承父元素的相应属性值。

例如：
/* 使用拐角矩形作为形状 */
shape-outside: rect(1em, 1em, 10em, 10em);

/* 使用多边形作为形状 */
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);

/* 使用 margin box 来定义形状 */
shape-outside: margin-box;
需要注意的是，要使用 shape-outside 属性的效果，还需要配合使用浮动（float）属性以及清除浮动的方式（如指定 clear 属性最近的浮动元素），以确保自身的布局不受到影响。

下面是实现上述效果的代码示例：
<div class="container">
  <img src="image.jpg" class="float-img">
  <p class="float-txt">这里是一段文本，将会紧密地环绕在图片的外部形状之中。</p>
</div>


.float-img {
  float: left;
  shape-outside: ellipse(50% 50% at 50% 50%);
}



.float-txt {
  margin-left: 20px;
}
在上述代码中，我们先通过 float 属性使图片浮动在左侧，然后使用 shape-outside 属性传递一个 ellipse() 函数指定了图片的形状，最后使用 margin 属性产生一些间距使文字不再紧挨着图片。这样一来，这段文字的排列就会紧密地跟着图片的形状来进行，实现了非常不错的视觉效果。

用户选择

user-select 是一种 CSS 属性，它可以控制用户选择文本时的表现形式。通常情况下，用户可以通过鼠标或者键盘来选择浏览器中的文本内容，但是通过设置 user-select 属性，开发者可以控制浏览器是否允许用户选择文本，以及选择文本时如何显示。
user-select 属性的取值如下：

auto：浏览器根据用户选择的上下文进行选择。不同的上下文可能会使用不同的选择方式。

none：禁止选择文本。用户无法选取文本。

text：允许选择文本，并应用默认的文本选取样式。

contain：允许选择文本，但是只能选择某些特定类型的元素内容，具体取决于元素类型。例如，可以对文本框、滚动区域、文本输入框等进行选择，但是不能选择其他类型的元素。

all：允许选择所有的元素内容，包括图片、视频等。

inherit：继承父元素的 user-select 属性取值。

提示浏览器哪些属性可能会发生变化，以便进行优化

will-change 是 CSS3 中一种用于提示浏览器元素属性可能会发生变化的属性。它可以提前告诉浏览器哪些属性可能会变化，从而让浏览器提前执行某些优化操作，以便更加高效地完成渲染。

具体来说，will-change 属性的值可以取以下几种:

auto：这是默认值，表示元素不会发生任何变化。

<animateable-feature>：表示需要被优化的特定属性。例如，如果元素的背景色可能会发生变化，则可以设置 will-change: background-color;。

contents：表示该元素的子元素会发生较大的变化。

scroll-position：表示元素的滚动位置可能会发生变化。

举例来说，如果你使用了一些含有复杂动画效果的网页，那么你可以在动画元素上添加 will-change 属性，告诉浏览器这些元素的特定属性可能会变化，从而使浏览器能够提前优化这些元素的渲染，以便更加高效地完成动画。

总之，will-change 可以帮助你提高网页性能，但也需要注意不能滥用这个属性，否则可能会导致更多性能问题。

实现遮罩效果

CSS中的mask可以用来控制元素的可见性，它通常用于实现遮罩效果或者裁剪图片。使用mask属性可以定义一个SVG或图像作为遮罩，然后将其应用到元素上。下面是一些常见的mask属性值以及它们的作用：

mask-image: 定义遮罩所使用的图像。可以使用url(link-to-image)来指定图像路径，也可以使用linear-gradient或radial-gradient来定义渐变遮罩。

mask-size: 定义遮罩的尺寸。可以指定一个具体的像素值，也可以使用百分比或者cover/contain来适应元素的大小。

mask-repeat: 定义遮罩的重复方式。可以设置为repeat(默认值)，no-repeat或者repeat-x/repeat-y。

mask-position: 定义遮罩的位置。可以指定一个具体的像素值，也可以使用百分比或者left/center/right等关键字。

mask-origin: 定义遮罩的起点位置。可以设置为padding-box(默认值)，border-box或者content-box。

mask-clip: 定义遮罩的剪切区域。可以设置为padding-box(默认值)，border-box或者content-box。

以下是一个示例，用于说明mask的使用:

HTML代码:
<div class="item"></div>
CSS代码：
.item {
  width: 200px;
  height: 200px;
  background-image: url(background-image.jpg);
  -webkit-mask-image: url(mask-image.svg);
  mask-image: url(mask-image.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
}
上述代码中定义了一个200×200像素的方形元素，并将其背景设置为一张图片。然后通过-webkit-mask-image/mask-image设置了一个作为遮罩的图片，并使用-webkit-mask-size/mask-size定义了遮罩的尺寸。接着使用-webkit-mask-position/mask-position来设置遮罩的位置，最终得到了一个裁剪后的图片。

对元素进行裁剪

CSS中的clip-path属性是用来裁剪元素的，可以通过设置不同的值裁剪出不同的形状。

clip-path有许多可选的值，下面是一些常见的值及其作用：

circle()：创建一个圆形裁剪区域，参数为圆的半径

polygon()：创建一个多边形裁剪区域，参数为多边形的顶点坐标

inset()：创建一个矩形裁剪区域，参数为矩形四个边的距离

path()：创建一个基于SVG路径的裁剪区域，参数为SVG路径

下面是一些具体的例子：

circle()
.clip-circle {
  clip-path: circle(50px);
}
上面的代码将会创建一个圆形裁剪区域，裁剪半径为50px的圆形。

polygon()
.clip-polygon {
  clip-path: polygon(0 0, 0 100px, 100px 50px);
}
上面的代码将会创建一个三角形的裁剪区域，顶点坐标分别为(0, 0)、(0, 100px)、(100px, 50px)。

inset()
.clip-inset {
  clip-path: inset(10px 20px 30px 40px);
}
上面的代码将会创建一个矩形的裁剪区域，左、上、右、下四边的距离分别为10px、20px、30px、40px。

path()
.clip-path {
  clip-path: path("M 50 0 L 0 50 L 50 100 L 100 50 Z");
}
上面的代码将会创建一个菱形的裁剪区域，基于SVG路径的顶点坐标分别为(50, 0)、(0, 50)、(50, 100)和(100, 50)。

注意，clip-path属性的兼容性并不好，如果想要更好的浏览器支持，可以考虑使用mask属性来代替。

创建和更新计数器

当你想要创建有序列表、序号标记、chapter标题数字计数器或者是页码控件时，你可以使用 counter-reset 和 counter-increment 这两个CSS属性。

counter-reset 用来定义一个计数器，设置其初始值。你可以给计数器设定一个名字，并从你希望的值开始。

counter-increment 用来将计数器的值逐个增加。每当你需要增加计数器的值时，你可以在 CSS 的选择器中使用 counter-increment 属性。

当你想要把计数器的值输出到 HTML 元素中时，可以使用 content 属性与 before 或 after 伪类结合，从而在列表或其他元素前或后展示计数器的值。

举例来说，我们可以创建一个有序列表，并以数字形式标记每个列表项：

指定输入框中光标的颜色

caret-color是CSS的一个属性，用于设置聚焦元素时的光标颜色。常见的用法是在输入框聚焦时改变光标颜色。

下面是caret-color属性可接受的值以及对应的作用：

auto：浏览器根据输入框文本的颜色自动设置光标颜色；

<color>：自定义光标颜色，<color>为CSS的颜色值。

是否显示元素的背面

backface-visibility是CSS3新增的一个属性，用来设置元素的背面是否可见。使用这个属性，可以控制当元素发生旋转或翻转时，其背面是否可见。

backface-visibility属性只有两个取值：visible和hidden。默认值为visible，表示元素的背面可见；如果将值设为hidden，则元素的背面会被隐藏起来。

需要注意的是，当元素进行翻转或旋转时，背面的可见性除了backface-visibility属性之外，还可以通过其他方式来控制，比如设置背景色、图片等等。因此，如果需要完全控制元素的背面可见性，需要综合考虑多种方式。

控制元素与背景颜色的混合模式

mix-blend-mode 属性定义了一个元素背景和元素内部的内容怎么融合。这个属性只影响元素自身，涉及到其他元素的 blend 混合效果需要用CSS混合模式.

mix-blend-mode 属性的值可以是以下任意一种：

normal：默认值。元素内容将绘制在背景上。

multiply：将“源”和“目标”的颜色值相乘。其结果通常会比原始值暗，因为该值总是小于等于1。通过此功能，用户可以在不移除背景的情况下更改元素的颜色。比如，一张照片的颜色深度和鲜艳度会得到极大增强。

screen：对“源”和“目标”的每个颜色值进行补色、相除，并取反结果。使用此功能，浅色区域的颜色将得到极大升华，深色区域的颜色将更加减淡。

overlay：叠加源色和目标色，变暗或变亮取决于目标色。这种模式比较神奇，经常使用在混合两种颜色以产生一种新颜色的背景图片上，产生滚翻和阴影效果。

darken：比较每个颜色通道并选择较暗的那个作为新颜色的颜色值。原本颜色较暗的区域会非常深，原本颜色较亮的区域则会变得非常浅，此时元素背景将不会受到任何影响。

lighten：通过比较每个通道并选择更亮的颜色来创建新颜色值。原本颜色较亮的区域将非常明亮，而颜色较暗的区域将会变得非常暗。

color-dodge：基于每个颜色通道将源色样本除以背景样本的值来创建新颜色值。结果肯定是比原始值轻，因为该值始终是1或更少。这种模式通常用于添加光线或表现出明亮的太阳。如果源颜色为白色，则输出颜色始终为白色。

color-burn：对每个颜色通道取反值，并且将背景样本除以源样本的值，以得到新颜色值。如果值大于1，则将其设置为1。结果通常比原始值更暗，因为该值始终大于或等于0。此模式通常用于添加阴影或加深颜色。

hard-light：如果目标颜色通道值小于0.5，则它将被翻倍并与源颜色相乘。这特别是“背景采光”的技术效果。如果目标颜色通道的值大于或等于0.5，则使用背景颜色的补色。此模式经常用于添加自然着色表现，使背景看起来更加丰富，同时调节源对目标的着色。

soft-light：最终颜色基于源色和目标颜色的混合。源颜色与两倍的目标颜色的补色相乘，然后再调色。这类似于hard-light，但两个ndia颜色制造了更中和的混合。

difference：按与顶部颜色的差异设置颜色，将颜色差异减少。一个更暗的背景颜色将使源颜色更亮，而一个更亮的背景色将使源颜色更暗。

exclusion：产生一种类似于“screen”的效果，除了颜色更柔和外，没有剩余的色调。目标的颜色值将被使用来减少源颜色的强度，这会使终结果变得柔滑。

控制文本中单词的断行方式

word-break是CSS的一个属性，用于控制文本中单词的断行方式。它有以下几个常用的取值：

normal（默认值）：即自动换行，单词不会被断开。

break-all：允许单词被断开，即单词内部也可以换行。

keep-all：尽量避免单词被断开，但如果长度超过父容器宽度，仍然会自动换行。

此外，在中文排版时，还可以使用word-break的一个扩展取值word-break:keep-all;white-space:nowrap;，将整个句子作为一个整体处理，禁止中途换行。这个方法在处理一些特定排版需求时非常有用。

更改文本的书写方向

CSS3的writing-mode属性控制文本流的方向，即指定文本在盒子中的流向。它有以下几个取值：

horizontal-tb：默认值，表示文本从左至右水平排列，并从上至下垂直排列。

vertical-rl：文本从上至下垂直排列，从右至左水平排列。

vertical-lr：文本从上至下垂直排列，从左至右水平排列。

writing-mode是CSS3中用于设置排版方式的一个属性，主要用于实现东亚语言文字排版。在中日韩等语言中，一般书写方向是从上到下，从右到左，因此需要使用writing-mode属性来进行控制。

合成多个图层的视觉效果

mix-blend-mode 是 CSS3 中用来设置元素以何种方式与其父元素内容混合的属性。简单来说，就是决定了元素自身内容如何与其他元素的内容合并显示在一起。
以下是 mix-blend-mode 的常见取值和对应效果：

normal：默认值，元素自身的样式不会和父元素的样式进行混合。

multiply：将元素内部的颜色与背景混合，呈现出更暗的颜色。

screen：将元素内部的颜色与背景混合，呈现出更亮的颜色。

overlay：按照元素内部的颜色来设置不透明度，偏中性的混合模式。

darken：最终呈现出会比元素内部颜色和背景更暗的颜色。

lighten：最终呈现出会比元素内部颜色和背景更亮的颜色。

color-dodge：将背景的颜色部分分离出来，然后通过减小饱和度的方式进行混合。

color-burn：将元素的颜色部分分离出来，然后通过增大饱和度的方式进行混合。

hard-light：元素的颜色会覆盖背景图像中的部分颜色，而背景图像中没有这些内容，将会变为透明。

soft-light：颜色混合模式尝试生成更加柔和的效果。

对元素的背景产生滤镜效果

backdrop-filter 是 CSS 3 的一个新属性，用于在元素的背景和它的内容之间添加一个图形效果，常常用于模糊、黑白、高亮等效果的实现。它可以跟 filter 属性一起使用同时对元素和它的背景进行处理。
backdrop-filter 的值可以分为以下几类：

模糊效果：backdrop-filter: blur(10px)，会在元素的背景上添加一个指定半径的高斯模糊效果。

亮度、对比度、饱和度效果：backdrop-filter: brightness(150%)，会增加元素的背景亮度； backdrop-filter: contrast(150%)，会增加元素的背景对比度； backdrop-filter: saturate(150%)，会增加元素的背景饱和度。

颜色效果：backdrop-filter: hue-rotate(90deg)，会对元素的背景色进行色相旋转； backdrop-filter: invert(100%)，会颠倒元素的背景色； backdrop-filter: sepia(100%)，会将元素的背景色转换为褐色调。

其他效果：backdrop-filter: opacity(50%)，会使元素的背景半透明； backdrop-filter: grayscale(100%)，会将元素的背景色转换为灰度。

控制元素是否可以被点击

pointer-events 是 CSS3 中的一个属性，它可以用于控制 HTML 元素是否可以成为鼠标事件的目标。当一个元素的 pointer-events 属性被设置为 none，则该元素不会成为鼠标事件的目标，会直接将鼠标事件传递到该元素的下一层元素。

一些常用的 pointer-events 属性值：

auto：默认值，元素可以成为鼠标事件的目标。

none：元素不能成为鼠标事件的目标。

visiblePainted：元素可以成为鼠标事件的目标，即使他们只有CSS背景有颜色。

visibleFill：表示元素可以成为鼠标事件的目标，考虑到一些日益流行的矢量图形文件格式不会呈现出外部填充或描边（例如SVG）。

visibleStroke：元素可以成为鼠标事件的目标，即使他们仅由空心（无填充）线条组成。

all：元素可以成为鼠标事件的目标，同时，子元素有一个由 pointer-events 定义的自己的模式。

需要注意的是，这个属性只在 IE（从11版本后开始支持）、 Firefox（从3.6版本开始支持）、Chrome（从2.0版本开始支持）、Safari（从4.0版本开始支持）、Opera（从10.0版本开始支持）以及Edge浏览器都可以使用。

控制动画完成后如何渲染元素的样式。

当CSS动画完成后，默认情况下，元素的样式将恢复到动画开始前的状态。但是，在一些情况下，您可能希望保留元素在动画结束后的样式。要实现这一点，您可以使用animation-fill-mode属性。

animation-fill-mode属性指定在动画之前和之后如何应用以前和后来的样式。它有四个值：

none：元素不应用任何以前或后来的样式。这是默认值。

forwards：元素应用最后一个关键帧的值（在动画完成后）。

backwards：元素应用第一个关键帧的值（在动画开始前）。

both：元素既要应用第一个关键帧的值又应用最后一个关键帧的值。

例如，如果设置了animation-fill-mode: forwards;，则在动画完成后元素将维持最后一个关键帧的状态。

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

# CSS

掌握这些CSS3冷门知识点，让你的网页设计更加酷炫