CSS3 引入了许多新的特性和功能，极大地扩展了网页设计和开发的能力。下面是一些主要的新增特性：
1. 选择器（Selectors）
-
属性选择器（Attribute Selectors） ：允许根据属性值选择元素。
css复制代码
a[href^="https"] { color: green; } /* 选择以 https 开头的链接 */ -
伪类选择器 ：
-
:nth-child()：允许选择一个父元素下特定的子元素。css复制代码
div:nth-child(2) { color: red; } /* 选择第二个子元素 */ -
:not()：选择不匹配某些条件的元素。css复制代码
p:not(.special) { color: gray; }
-
2. 盒模型（Box Model）
-
box-sizing ：控制盒子模型的计算方式，可以让宽高包含内边距和边框。
css复制代码
div { box-sizing: border-box; }默认情况下，width和height只包含内容的尺寸，但使用box-sizing: border-box;会让它们包括内边距和边框。
3. 圆角（Border Radius）
-
border-radius：用于设置元素的圆角效果。div { border-radius: 10px; }
4. 阴影效果（Box Shadows and Text Shadows）
-
box-shadow：为元素添加阴影效果。div { box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); } -
text-shadow：为文本添加阴影效果。h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
5. 渐变（Gradients）
-
线性渐变（linear-gradient） ：设置从一个颜色渐变到另一个颜色。
background: linear-gradient(to right, red, yellow); -
放射性渐变（radial-gradient） ：从中心向外渐变。
background: radial-gradient(circle, red, blue);
6. 背景（Background）
-
多重背景 ：可以为元素设置多个背景图。
background: url(image1.png), url(image2.png); -
background-size：控制背景图的大小。background-size: cover; /* 背景图像自适应覆盖整个元素 */
7. 弹性布局（Flexbox）
-
Flexbox ：用于更灵活和高效地布局和对齐元素。
css复制代码
.container { display: flex; justify-content: space-between; } .item { flex: 1; }
8. 网格布局（CSS Grid）
-
CSS Grid ：创建二维网格布局。
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .item { grid-column: span 2; }
9. 过渡（Transitions）
-
transition：使元素在状态改变时平滑过渡。div { transition: all 0.3s ease; } div:hover { background-color: yellow; }
10. 动画（Animations）
-
@keyframes：定义动画的关键帧，可以制作更复杂的动画效果。@keyframes example { 0% { background-color: red; } 100% { background-color: blue; } } div { animation: example 2s infinite; }
11. 媒体查询（Media Queries）
-
响应式设计 ：通过媒体查询，CSS可以根据设备的特性（如屏幕宽度）调整样式。
@media (max-width: 600px) { .container { flex-direction: column; } }
12. 视差滚动（Parallax Scrolling）
-
背景固定和滚动效果 ：CSS3可以通过
background-attachment实现视差滚动效果。body { background: url('background.jpg') fixed; }
13. 自定义属性（CSS Variables）
-
CSS变量 ：允许在CSS中定义可重用的值，方便管理和修改。
:root { --main-color: #3498db; } .box { background-color: var(--main-color); }
14. 多列布局（Multi-column Layouts）
-
多列布局 ：通过CSS设置文本或内容分为多列。
.column { column-count: 3; column-gap: 20px; }
15. 文本溢出处理（Text Overflow）
-
text-overflow：设置文本溢出时的处理方式，通常用于显示省略号。div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
16. 变换（Transforms）
-
transform：对元素进行旋转、缩放、倾斜或平移。div { transform: rotate(45deg); }
17. 计时函数（Timing Functions）
-
CSS3引入了多种计时函数来控制动画和过渡的速度。
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
18. 视口单位（Viewport Units）
-
vw,vh,vmin,vmax：相对于视口宽度和高度的单位，便于响应式设计。div { width: 50vw; } /* 视口宽度的一半 */
19. 字体（Font Face）
-
@font-face：允许使用自定义字体。@font-face { font-family: "MyFont"; src: url("myfont.woff2") format("woff2"); } body { font-family: "MyFont", sans-serif; }
总结：
CSS3引入了大量新特性，使得网页设计更加灵活、现代和富有表现力。通过合理使用这些新特性，开发者可以创造出更加复杂和美观的网页布局和用户体验。