CSS篇五：CSS3的扩展_css3 新增选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_63022858/article/details/142861270

简述：CSS3的扩展新增了一些特性，对样式的适用性得到了比较大的提高。

（官方术语：丰富了网页设计和开发的可能性）

一、新增样式

前置说明：

CSS3中其实增加的不止一些样式，它还增加了一些选择器，但为了更好的记忆，所以选择在一个篇幅中进行介绍了（具体选择器请查看css篇二）。

其中新增的选择器有：动态伪类选择器、目标伪类选择器、伪元素选择器等。

1、盒模型

‌`box-sizing`属性‌

‌作用‌：box-sizing属性用于改变盒模型的计算方式。

注意：默认情况下，元素的宽度和高度只包括内容区，不包括边框、内边距和外边距。但是通过设置box-sizing属性，可以将边框和内边距也包含在宽度和高度之内。

‌取值‌：

content-box：默认值，元素的宽度和高度只包括内容区。

border-box：元素的宽度和高度包括内容区、边框和内边距，但不包括外边距。

inherit：从父元素继承box-sizing属性的值。

‌`border-radius`属性‌

‌作用‌：border-radius属性用于创建圆角边框。

‌取值‌：可以是长度值（如px、em等）或百分比。

当设置一个值时，表示所有四个角的圆角半径都相同；

当设置两个值时，第一个值表示左上角和右下角的圆角半径，第二个值表示右上角和左下角的圆角半径；

当设置三个或四个值时，分别表示左上角、右上角、右下角和左下角的圆角半径。

‌`box-shadow`属性‌

‌作用‌：box-shadow属性用于在元素的框（边框、内边距、内容区）外添加阴影效果。

‌取值‌：

水平偏移量：阴影的水平偏移距离，正值表示阴影向右偏移，负值表示阴影向左偏移。

垂直偏移量：阴影的垂直偏移距离，正值表示阴影向下偏移，负值表示阴影向上偏移。

模糊半径（可选）：阴影的模糊程度，值越大表示阴影越模糊。如果省略此值，则阴影的边缘将是清晰的。

扩展半径（可选）：阴影的大小，正值表示阴影扩大，负值表示阴影缩小。如果省略此值，则阴影的大小将与元素的大小相同。

颜色（可选）：定义阴影的颜色。可以使用RGBA、HSLA或十六进制颜色值。如果省略此值，则阴影的颜色将由浏览器决定（通常是黑色）。

2、背景与边框

多背景图片支持

‌作用‌：为一个元素指定多个背景图片。这些背景图片可以按照你指定的顺序层叠在一起，第一个背景图片位于最顶层，最后一个位于最底层。
‌使用方式‌：你可以通过逗号分隔每个背景图片的值来为一个元素指定多个背景。
例如：background-image: url(image1.jpg), url(image2.jpg);。

渐变背景

‌作用‌：创建平滑的颜色过渡效果。

‌线性渐变‌：

使用linear-gradient()函数创建，指定一个渐变的方向（或角度）以及渐变中的颜色节点。

例如：background-image: linear-gradient(to right, red, yellow, green);将创建一个从左到右的渐变，颜色从红色过渡到黄色，再到绿色。

‌径向渐变‌：

使用radial-gradient()函数创建，你可以指定渐变的形状（圆形或椭圆形）、大小以及渐变中的颜色节点。

径向渐变是从一个点（或形状的中心）开始，向四周扩散的颜色过渡。

边框图片（`border-image`）

‌作用‌：通过border-image属性可以使用图片作为元素的边框。

‌使用方式‌：通过border-image属性来设置边框图片，

该属性可以接受多个值——

图片的路径、图片的切割方式、边框的宽度以及边框图片的拉伸方式等。

例如：border-image: url(border.png) 30 round;将使用border.png作为边框图片，边框的宽度为30像素，并且图片会被拉伸以填充边框区域。

3、文本效果

`text-shadow`属性

‌作用‌：text-shadow属性用于在文本后面添加阴影效果，使文本看起来更加立体和有层次感。
‌取值‌：该属性可以接受多个值，包括阴影的水平偏移量、垂直偏移量、模糊半径以及阴影的颜色。
‌范例‌：

p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这将为<p>元素中的文本添加一个水平偏移2px、垂直偏移2px、模糊半径为4px且颜色为半透明黑色的阴影。

`word-wrap`和`overflow-wrap`属性

‌作用‌：word-wrap（在较新的规范中被称为overflow-wrap）属性用于控制当单词太长而无法全部放在一行时，是否应该断行。
‌取值‌：该属性有两个常用的值：normal和break-word。
‌范例‌：

.container {
  width: 200px;
  overflow-wrap: break-word;
}

这将使.container类中的文本在单词太长时自动断行，以避免文本溢出容器。

`text-overflow`属性

‌作用‌：text-overflow属性用于设置当文本溢出其包含框时如何显示。
‌取值‌：该属性有几个常用的值：clip、ellipsis和string。
‌范例‌：

.single-line {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这将使.single-line类中的单行文本在溢出时显示省略号（...），以表示文本被截断。

4、字体与颜色

`@font-face`规则

‌作用‌：@font-face 规则允许在网页中使用自定义字体，即使这些字体不是用户设备上预装的。
‌使用方式‌：需要在CSS中声明 @font-face 规则，并指定字体的名称和字体文件的路径。（之后就可以像使用其他字体一样使用这个自定义字体）
‌范例‌：

@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

`opacity`属性

‌作用‌：opacity 属性用于设置元素的透明度。透明度的值在 0.0（完全透明）到 1.0（完全不透明）之间。
‌使用方式‌：直接在元素的样式中设置 opacity 属性。
‌范例‌：

.transparent-box {
  opacity: 0.5;
}

RGBA、HSLA等颜色值

‌作用‌：RGBA 和 HSLA 颜色值可以在定义颜色时同时设置透明度。（RGBA 表示红色、绿色、蓝色和透明度，而 HSLA 表示色相、饱和度、亮度和透明度）
‌使用方式‌：在任何需要颜色值的地方使用 RGBA 或 HSLA。
‌范例‌：

.rgba-color {
  color: rgba(255, 0, 0, 0.5); /* 红色，50% 透明度 */
}

.hsla-color {
  background-color: hsla(120, 100%, 50%, 0.3); /* 绿色，30% 透明度 */
}

5、2D/3D转换

`transform`属性

‌作用‌：transform属性允许你对元素进行旋转、缩放、倾斜或平移等2D或3D转换。

‌常用值‌：

rotate()：旋转元素，指定旋转角度。
scale()：缩放元素，指定缩放比例。
translate()：移动元素，指定移动距离。
skew()：倾斜元素，指定倾斜角度。
matrix()：使用矩阵变换来组合多个变换效果。

‌范例‌：

.element {
  transform: rotate(45deg); /* 旋转45度 */
}

`transition`属性

‌作用‌：transition属性用于在元素的不同状态之间添加过渡效果，使状态变化更加平滑。

‌常用值‌：

property：指定要应用过渡效果的CSS属性名。
duration：指定过渡效果持续的时间。
timing-function：指定过渡效果的时间曲线。
delay：指定过渡效果开始前的延迟时间。

‌范例‌：

.element {
  transition: opacity 2s ease-in-out 1s; /* 透明度变化，持续2秒，时间曲线为ease-in-out，延迟1秒开始 */
}

`perspective属性`

‌作用‌：perspective属性用于设置3D元素的透视效果，即观察者距离屏幕的距离，影响3D元素的视觉深度。

‌常用值‌：

长度值：可以是具体的长度，如px。
none：表示不使用透视效果。

‌范例‌：

.element {
  perspective: 500px; /* 设置透视距离为500像素 */
}

`perspective-origin`属性

‌作用‌：perspective-origin属性用于设置3D元素透视效果的原点，即观察者视线的出发点。

‌常用值‌：

关键词：left、center、right、top、bottom。
长度值：可以是具体的长度，如px、%等。

‌范例‌：

.element {
  perspective-origin: right bottom; /* 设置透视原点在右下角 */
}

6、动画

`@keyframes`规则

‌作用‌：
@keyframes规则用于创建动画序列，通过指定动画在特定时间点的样式来定义动画的关键帧。

‌常用值‌：

from：定义动画的开始状态（0%或0s）。
to：定义动画的结束状态（100%或动画的持续时间）。
百分比值：定义动画在特定时间点的状态（例如，50%表示动画的中间状态）。

‌范例‌：

@keyframes example {
  from {
    background-color: red;
    transform: translateX(0);
  }
  to {
    background-color: yellow;
    transform: translateX(100px);
  }
}

在这个例子中，@keyframes定义了一个名为“example”的动画，它从红色背景开始，元素位于其原始位置，然后过渡到黄色背景，同时元素向右移动100像素。

`animation`属性

‌作用‌：
animation属性用于将@keyframes定义的动画应用于元素，并控制动画的播放方式。

‌常用值‌：

name：指定要应用的动画名称（即@keyframes规则的名称）。
duration：指定动画的持续时间。
timing-function：指定动画的时间曲线。
delay：指定动画开始前的延迟时间。
iteration-count：指定动画的播放次数。
direction：指定动画的播放方向。
fill-mode：指定动画在播放前后如何将样式应用于目标。
play-state：允许暂停和恢复动画的播放。

‌范例‌：

.animated-element {
  animation: example 2s infinite ease-in-out;
}

在这个例子中，.animated-element类将应用名为“example”的动画，动画持续时间为2秒，将无限次播放，并使用ease-in-out时间曲线。

二、媒体查询

简述：它也是CSS3中新增的内容，作用是将内容的呈现方式根据不同的条件（如视口宽度、设备类型、分辨率等）来应用不同的样式规则。

（使用 @media 规则在 CSS 中实现，后面跟着一个或多个条件，以及一组大括号内的样式规则）

下面介绍几种常用的使用方式：

‌1、视口宽度（min-width 和 max-width）‌：

@media (min-width: 768px) {
  /* 当视口宽度至少为 768px 时应用的样式 */
}

@media (max-width: 480px) {
  /* 当视口宽度最多为 480px 时应用的样式 */
}

2、设备类型（print、screen、speech） 等

@media print {
  /* 打印文档时应用的样式 */
}

@media screen {
  /* 在屏幕上显示时应用的样式 */
}

3、方向（orientation）

@media (orientation: landscape) {
  /* 当设备处于横向模式时应用的样式 */
}

@media (orientation: portrait) {
  /* 当设备处于纵向模式时应用的样式 */
}

4、分辨率（min-resolution 和 max-resolution）

@media (min-resolution: 192dpi) {
  /* 当设备分辨率至少为 192dpi 时应用的样式 */
}

@media (max-resolution: 144dpi) {
  /* 当设备分辨率最多为 144dpi 时应用的样式 */
}

5、‌颜色索引（min-color-index 和 max-color-index）

@media (min-color-index: 256) {
  /* 当设备支持至少 256 种颜色时应用的样式 */
}

6、‌使用 not 或 only 关键字

@media not print {
  /* 当媒体类型不是打印时应用的样式 */
}

@media only screen and (min-width: 600px) {
  /* 当媒体类型是屏幕且视口宽度至少为 600px 时应用的样式 */
}

局限性：

‌设备支持问题‌：某些旧版本的浏览器或设备可能不支持媒体查询功能，导致无法根据设备特性应用不同的样式。‌
‌条件设置问题‌：媒体查询的条件设置不准确，可能会导致样式在某些设备上无法正确应用。‌
‌样式冲突‌：媒体查询中定义的样式与其他CSS样式发生冲突，可能会导致媒体查询无效。‌
‌语法和放置问题‌：错误的媒体查询语法或放置位置错误，都可能导致媒体查询不起作用。‌
‌媒体类型和特性不匹配‌：指定的媒体类型或特性与当前设备不匹配，也会导致媒体查询无法生效。‌

综述：媒体查询在响应式布局中使用频率很高，所以还是很有必要学习的。

三、新增的布局方式

简述：在CSS3中新增的布局方式主要有弹性盒子布局、网格布局以及多列布局三种，前两种在篇四种详细说过，这里就不再复述。

多列布局

介绍：一种用于排列文本内容的布局方式，可以将内容分为多个列进行展示。

‌特点‌：

‌简单易用‌：通过几个简单的CSS属性，即可轻松实现将内容分为多列进行展示的效果。
‌自适应性‌：多列布局可以根据设备的尺寸和屏幕的宽度自动调整列数和列宽，以适应不同的显示环境。
‌可定制性‌：开发者可以通过设置不同的CSS属性来定制列数、列宽、列间距以及列之间的分隔线等布局样式。
‌提升阅读体验‌：将文本内容分成多列显示，可以使页面更加整洁，提高用户的阅读体验。

‌缺点‌：

‌浏览器兼容性‌：部分旧版本的浏览器可能不支持多列布局的相关CSS属性。
‌布局复杂性‌：对于复杂的页面布局，多列布局可能难以实现精细的控制和定制。

‌属性‌：

‌column-count‌：用于设置列数。
‌column-gap‌：用于设置列与列之间的间距。
‌column-rule‌：用于设置列之间的分隔线。

‌属性值‌：

‌column-count‌：可以设置为具体的数字，表示列数；也可以设置为“auto”，表示自动根据内容确定列数。
‌column-gap‌：可以设置为具体的长度值，如“20px”；也可以设置为“normal”，表示使用默认的间距。
‌column-rule‌：可以设置分隔线的宽度、样式和颜色，如“1px solid black”表示分隔线为1像素宽、实线、黑色。

‌范例‌：

.multicolumn {
  column-count: 3; /* 设置为3列 */
  column-gap: 20px; /* 列与列之间的间距为20像素 */
  column-rule: 1px solid black; /* 列之间的分隔线为1像素宽、实线、黑色 */
}

<div class="multicolumn">
  这是一段需要被分为多列显示的文本内容。根据上面的CSS样式，这段文本将被分为3列进行展示，列与列之间的间距为20像素，并且列之间有黑色的分隔线。
</div>

综述：多列布局的使用度比较有限，一般都是在文章、博客、新闻这些页面。（如果不涉及的情况下看看就好，等到遇到这个场景在实操学习，比较简单而且也不是着重点。）

四、CSS完结语

简述一下：CSS的核心点在于布局！核心点在于布局！核心点在于布局！不要看样式挺多的，但那些都是随手就可以拿来用的，不记得了就上网查，一找一大把，但是布局如果崩了，那就好好加班吧（对小白的忠告）。

CSS篇五：CSS3的扩展

一、新增样式

前置说明：

1、盒模型

‌box-sizing属性‌

‌border-radius属性‌

‌box-shadow属性‌

2、背景与边框

多背景图片支持

渐变背景

‌线性渐变‌：

‌径向渐变‌：

边框图片（border-image）

3、文本效果

text-shadow属性

word-wrap和overflow-wrap属性

text-overflow属性

4、字体与颜色

@font-face规则

opacity属性

RGBA、HSLA等颜色值

5、2D/3D转换

transform属性

transition属性

perspective属性

perspective-origin属性

6、动画

@keyframes规则

animation属性

二、媒体查询

三、新增的布局方式

多列布局

四、CSS完结语

‌`box-sizing`属性‌

‌`border-radius`属性‌

‌`box-shadow`属性‌

边框图片（`border-image`）

`text-shadow`属性

`word-wrap`和`overflow-wrap`属性

`text-overflow`属性

`@font-face`规则

`opacity`属性

`transform`属性

`transition`属性

`perspective属性`

`perspective-origin`属性

`@keyframes`规则

`animation`属性