CSS3 引入了许多新特性，以增强样式设计和页面布局的能力，提供更多的视觉效果和交互性。以下是一些 CSS3 中的新特性：
- 圆角边框（Border Radius）：圆角的边框，而不是传统的方形边框。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.element {width: 100px;height: 100px;margin: 40px 0;background: greenyellow;/* // 直径为100px 的圆形 */border-radius: 50%;}.element1 {width: 200px;height: 50px;background: red;border-radius: 6px;}</style></head><body><div class="element"></div><div class="element1"></div></body>
</html>效果如下：
- 阴影（Box Shadow）：元素添加投影效果，使元素看起来浮在页面上。
// 取值含义
// box-shadow: [水平偏移] [垂直偏移] [模糊半径] [阴影尺寸] [颜色] [内外阴影];
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.element {width: 200px;height: 50px;margin: 40px 0;background: greenyellow;box-shadow: 0 -5px 0 5px red inset; /* 创建一个向上偏移的红色内部阴影，模糊半径为 0，阴影尺寸为 5 像素，颜色为红色：*/}.element1 {width: 200px;height: 50px;background: rgb(207, 98, 180);box-shadow: 5px 5px 10px gray; /* 创建一个向右下方偏移的灰色阴影，模糊半径为 10 像素，颜色为灰色：*/}</style></head><body><div class="element"></div><div class="element1"></div></body>
</html>效果如下：
- 渐变背景（Gradient Backgrounds）：可以使用线性渐变或径向渐变来创建复杂的背景效果。
.element {width: 200px;height: 50px;background: goldenrod;background: linear-gradient(to right, #ffcc00, #ff6600);
}
效果如下：
- 多列布局（Multi-column Layout）：使文本内容可以在多个列中显示，以改善页面布局。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.column-container {column-count: 3;column-gap: 20px;background-color: #f5f5f5;border: 1px solid #ddd;padding: 10px;}</style></head><body><div class="column-container"><p>第一列的内容...</p><p>第二列的内容...</p><p>第三列的内容...</p><!-- 更多文本内容 --></div></body>
</html>
效果如下：
- 媒体查询（Media Queries）：可以根据不同的屏幕尺寸和设备特性来应用不同的样式。响应式常用的方法
@media screen and (max-width: 600px) {/* 在小屏幕下应用的样式 */
}
- 2D 转换（2D Transforms）：可以对元素进行旋转、缩放、平移和倾斜等变换操作。
.element {transform: rotate(45deg) scale(1.5);
}
- 3D 转换（3D Transforms）：元素在三维空间中进行变换，创建更立体的效果。
.element {
width: 200px;
height: 50px;
background: goldenrod;
transform: translate3d(50px, 20px, 30px) rotate3d(1, 1, 0, 45deg);
}
效果如下：
- 过渡（Transitions）：允许你在元素状态之间创建平滑的过渡效果，例如鼠标悬停时改变颜色或大小。
.element {transition: all 0.3s ease-in-out;
}
.element:hover {transform: scale(1.2);
}- 动画（Animations）：可以创建复杂的动画效果，通过
@keyframes规则定义动画序列。
@keyframes slide {0% {transform: translateX(0);}100% {transform: translateX(100px);}
}.element {animation: slide 2s ease-in-out infinite;
}
- 自定义字体（Web Fonts）：使用
@font-face规则，可以引入自定义字体，以实现更多字体选择。
@font-face {font-family: 'MyFont';src: url('myfont.woff') format('woff');
}.element {font-family: 'MyFont', sans-serif;
}
- 弹性盒子布局（Flexbox）：提供了一种更直观的方式来布局元素，特别适用于创建响应式设计和复杂的布局结构。
.container {display: flex;justify-content: center;align-items: center;
}
- 网格布局（Grid Layout）：允许你创建多行和多列的网格布局，以更精确地控制页面布局。
.container {display: grid;grid-template-columns: 1fr 2fr 1fr;grid-gap: 10px;
}
- 过滤效果（Filter Effects）：可以通过
filter属性为元素应用滤镜效果，如模糊、饱和度、对比度等。
.element {filter: blur(5px);
}
- 混合模式（Blend Modes）：通过
mix-blend-mode属性可以控制元素与其背景之间的混合模式，创建各种视觉效果。
.element {mix-blend-mode: overlay;
}
- 自定义属性（Custom Properties）：允许你创建自定义的 CSS 变量，以便在整个样式表中共享和重复使用值。
:root {--main-color: #3498db;
}.element {background-color: var(--main-color);
}
- 多列文本（Multicolumn Text）：使用
column-count和column-gap等属性，可以将文本内容分成多列。
.element {column-count: 2;column-gap: 20px;
}17. **背景图像大小（Background Image Size）**：可以通过 `background-size` 属性控制背景图像的尺寸，以适应元素大小。```css
.element {background-image: url('image.jpg');background-size: cover;
}
- 用户界面控件伪类（UI Pseudo-classes）：包括
:checked、:disabled、:focus等伪类，用于根据用户界面控件的状态应用样式。
input:checked + label {font-weight: bold;
}
- 变量字体（Variable Fonts）：使用变量字体，可以在单一字体文件中包含多个字体样式，如粗体、斜体等，以减少字体文件的加载。
.element {font-family: 'MyVariableFont', sans-serif;font-variation-settings: 'wght' 600, 'ital' 1;
}
- 伪元素（Pseudo-elements）：包括
::before和::after等伪元素，允许你在元素的内容之前或之后插入内容。
.element::before {content: '>';
}.element::after {content: '<';
}
- 对象适应性（Object Fit）：用于调整图像或视频等替换元素的大小和位置以适应容器。
img {object-fit: cover;
}
- 文字换行（Word Break）：控制文本的自动换行方式，以处理不同语言和文本内容的换行需求。
.element {word-break: break-all;
}
- 柔性文本溢出（Text Overflow）：用于处理文本内容溢出容器时的显示方式，如省略号表示截断。
.element {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
- 定位（Positioning）：使用
position和z-index属性，可以更精确地控制元素的定位和层叠顺序。
.element {position: absolute;top: 0;left: 0;z-index: 2;
}
- 自适应大小（Viewport Units）：使用相对于视口大小的单位，如
vw（视口宽度）和vh（视口高度），来创建响应式设计。
.element {width: 50vw;height: 50vh;
}
以上只是总结的部分新特性
