您可能不知道的 CSS3 特性：Flexbox、网格布局、自定义属性、过渡、动画和多背景

级联样式表 (的CSS) 不断发展，最新版本可能有一些您可能不知道的功能。 以下是 CSS3 引入的一些主要改进和方法，以及代码示例：

• 灵活的盒子布局（Flexbox）： 一种布局模式，可让您为网页创建灵活且响应迅速的布局。 使用 flexbox，您可以轻松地在容器内对齐和分布元素。 在这个例子中， .container 课堂使用 display: flex 启用 flexbox 布局模式。 这 justify-content 属性设置为 center 使子元素在容器内水平居中。 这 align-items 属性设置为 center 使子元素垂直居中。 这 .item 类设置子元素的背景颜色和填充。

<div class="container">
  <div class="item">Centered Element</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

• 网格布局： 另一种布局模式，允许您为网页创建复杂的基于网格的布局。 使用网格，您可以指定行和列，然后将元素放置在网格的特定单元格中。 在这个例子中， .grid-container 课堂使用 display: grid 启用网格布局模式。 这 grid-template-columns 属性设置为 repeat(2, 1fr) 创建两列等宽。 这 gap 属性设置网格单元格之间的间距。 这 .grid-item 类设置网格项的背景颜色和填充。

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

• 过渡： CSS3 引入了许多用于在网页上创建过渡的新属性和技术。 例如， transition 属性可用于动画化 CSS 属性随时间的变化。 在这个例子中， .box 类设置元素的宽度、高度和初始背景色。 这 transition 属性设置为 background-color 0.5s ease 使用 ease-in-out 定时功能在半秒内对背景颜色属性的变化进行动画处理。 这 .box:hover 当鼠标指针悬停在元素上时，类会更改元素的背景颜色，从而触发过渡动画。

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

• 动画： CSS3 引入了许多用于在网页上创建动画的新属性和技术。 在此示例中，我们使用 animation 财产。 我们定义了一个 @keyframes 动画规则，它指定框应在 0 秒的持续时间内从 90 度旋转到 0.5 度。 当框悬停在上方时， spin 应用动画来旋转框。 这 animation-fill-mode 属性设置为 forwards 以确保动画完成后保留最终状态。

<div class="rotate"></div>

.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Add animation properties */
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Define the animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

.rotate:hover {
  animation-name: spin;
}

• CSS 自定义属性： 也被称为 CSS 变量, CSS3 中引入了自定义属性。 它们允许您在 CSS 中定义和使用您自己的自定义属性，这些属性可用于在整个样式表中存储和重用值。 CSS 变量由以两个破折号开头的名称标识，例如 --my-variable. 在此示例中，我们定义了一个名为 –primary-color 的 CSS 变量，并为其赋值 #007bff，这是一种在许多设计中常用作原色的蓝色。 我们使用这个变量来设置 background-color 按钮元素的属性，通过使用 var() 函数并传入变量名。 这将使用变量的值作为按钮的背景颜色。

:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}

• 多重背景： CSS3 允许您为一个元素指定多个背景图像，并能够控制其定位和堆叠顺序。 背景由两张图片组成， red.png 和 blue.png，这是使用加载 background-image 财产。 第一张图， red.png, 位于元素的右下角，而第二张图片， blue.png, 位于元素的左上角。 这 background-position 属性用于控制每个图像的定位。 这 background-repeat 属性用于控制图像的重复方式。 第一张图， red.png, 设置为不重复 (no-repeat), 而第二张图片, blue.png, 设置为重复 (repeat).

<div id="multibackground"></div>

#multibackground {
  background-image: url(red.png), url(blue.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  height: 200px;
  width: 200px;
}