1.CSS Grid
CSS Grid 是另一个强大的布局模块，它是一个二维布局系统，允许精确控制网格内项目的放置和对齐。CSS Grid 非常适合创建复杂的布局，例如杂志样式的页面或产品列表。
要创建网格布局，需要定义一个网格容器并指定其行和列的大小和位置。然后，可以使用网格放置属性将项目放置在网格内。
下面是一个简单的 CSS 网格布局示例：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
.box {
background-color: red;
}
1.2.3.4.5.6.7.8.9.10.11.
在本例中，我创建了一个网格容器，其类为“container”，三列三行。使用“repeat”函数创建三个大小相等的列和三个高度为 100 像素的行。
我还在网格中的每个项目之间指定了 10 像素的间隙。然后，使用“grid-column”和“grid-row”属性将红色框放置在网格中。
2. CSS Transitions
CSS Transitions 允许向网页添加流畅的动画，它们能够在指定的持续时间内更改元素的样式，从而创建动画效果。
要使用 CSS Transitions，你可以定义一个要设置动画的 CSS 属性，并使用 transition 属性指定持续时间和计时函数。你还可以使用其他 CSS 属性（例如变换、不透明度和颜色）来创建更复杂的动画。
下面是一个使用 CSS Transitions 的例子：
<button class="button">Click Me</button>
1.
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: red;
}
1.2.3.4.5.6.7.8.9.10.11.12.
在此示例中，我创建了一个具有蓝色背景色和白色文本的按钮元素。我对 background-color 属性应用过渡，指定 0.5 秒的持续时间和缓动函数。当按钮悬停时，背景颜色平滑地变为红色，创造出漂亮的动画效果。
3. CSS Animation
CSS 动画类似于 CSS 过渡，但提供了对动画过程的更多控制。动画允许您使用关键帧和各种与动画相关的属性创建复杂的动态动画。
要创建 CSS 动画，需要定义一组描述不同阶段动画的关键帧，然后使用 animation 属性将动画应用于元素。还可以指定各种与动画相关的属性，例如动画持续时间、计时函数和延迟。
下面是一个简单的 CSS 动画示例：
.box {
width: 100px;
height: 100px;
background-color: red;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.
在此示例中，我们创建了一个红色框并对其应用了名为“pulse”的 CSS 动画。脉冲动画是使用关键帧定义的，这些关键帧在动画的不同阶段指定框的比例。动画持续 2 秒并无限重复。
4. CSS Filters
CSS 过滤器是一组强大的视觉效果，可应用于网页上的元素。它们允许通过应用各种图像处理操作（例如模糊、亮度调整和颜色操作）来修改元素的外观。
要应用 CSS 过滤器，您需要指定过滤器属性及其值。
这是一个简单的 CSS 过滤器的示例：
.box {
width: 200px;
height: 200px;
background-image: url("example.jpg");
filter: grayscale(100%);
}
1.2.3.4.5.6.
在此示例中，我创建了一个带有背景图像的框，并对其应用了 CSS 滤镜，使图像完全去色，从而产生黑白效果。
5. CSS Variables
CSS 变量允许您定义可在整个 CSS 代码中使用的可重用值。它们是简化代码并使其更易于维护的好方法。CSS 变量使用“—”前缀定义，可用于任何 CSS 属性。
这是一个简单的 CSS 变量的示例：
:root {
--primary-color: #007bff;
}
.box {
background-color: var(--primary-color);
}
1.2.3.4.5.6.7.8.
在此示例中，我定义了一个名为“—primary-color”的 CSS 变量，并将其值设置为 Bootstrap 中使用的蓝色。然后，我将这个变量应用到盒子元素的 background-color 属性，使它变成蓝色。
6. CSS 伪类
CSS 伪类是允许您根据元素在文档中的状态或位置来定位元素的选择器。
下面是一个简单的 CSS 伪类的例子：
a:hover {
color: red;
}
1.2.3.
在这个例子中，使用 :hover 伪类来定位用户悬停的链接。当链接悬停时，文本的颜色变为红色。
7. CSS Transforms
CSS Transforms通过更改元素的位置、大小或方向来修改元素的外观。它们是创建复杂动态布局和动画的强大方式。
这是一个简单的 CSS 转换示例：
.box {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
1.2.3.4.5.6.
在此示例中，我创建了一个红色框并对其应用了 CSS 变换，将其旋转了 45 度。
8. CSS Opacity
CSS Opacity 是一个允许调整元素透明度的属性。这对于创建叠加层、添加视觉效果或使文本在背景图像上更清晰易读很有用。
要使用 CSS 不透明度，可以将不透明度属性应用于元素并将其设置为 0 到 1 之间的值。值 0 使元素完全透明，而值 1 使其完全不透明。
这是使用 CSS 不透明度的示例：
<div class="overlay">
<h1>Welcome to My Website</h1>
</div>
1.2.3.
.overlay {
background-image: url('background-image.jpg');
opacity: 0.8;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
h1 {
color: white;
font-size: 3rem;
text-align: center;
}
1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.
在此示例中，我创建了一个带有背景图像的叠加元素，并应用了 0.8 的不透明度以使其半透明。我将元素完全定位在整个屏幕上，并添加一个居中的标题以使其更具视觉吸引力。
9. CSS 自定义属性
CSS 自定义属性，也称为 CSS 变量，允许您定义可在整个 CSS 中使用的可重用值。这对于定义颜色、字体大小或边距等常用值非常有用，并且可以轻松地在一个地方更新它们。
下面是一个使用 CSS 自定义属性的例子：
<div class="box"></div>
1.
:root {
--bg-color: blue;
--box-width: 100px;
--box-height: 100px;
}
.box {
width: var(--box-width);
height: var(--box-height);
background-color:
var(--bg-color);
}
1.2.3.4.5.6.7.8.9.10.11.12.13.
在此示例中，使用 :root 选择器和 — 前缀定义了三个自定义属性。然后，我们在 .box 类中使用这些自定义属性来设置框的宽度、高度和背景颜色。这使得在一个地方更新自定义属性的值并使更改反映在整个 CSS 中变得容易。
