CSS3 新增了哪些新特性？
问题解析
CSS3 是 CSS 的重大升级，引入了大量新特性。面试考察这个问题，是想要了解候选人对现代 CSS 的掌握程度，以及能否运用这些新特性解决实际问题。
CSS3 核心新特性
1. 选择器增强
/* 属性选择器 */
[href^="https"] /* 以 https 开头 */
[href$=".pdf"] /* 以 .pdf 结尾 */
[href*="example"] /* 包含 example */
/* 结构伪类 */
:nth-child(2n+1) /* 奇数项 */
:nth-of-type(2) /* 同类型的第2个 */
:last-child /* 最后一个子元素 */
:only-child /* 唯一的子元素 */
:not(.exclude) /* 排除特定类 */
:empty /* 空元素 */
/* 表单状态 */
:disabled, :checked, :focus, :valid, :invalid
2. 边框与背景
/* 圆角 */
border-radius: 10px;
border-radius: 10px 20px; /* 上左下右 上右下左 */
border-radius: 50%; /* 圆形 */
/* 盒子阴影 */
box-shadow: 0 2px 10px rgba(0,0,0,0.3); /* x偏移 y偏移 模糊 颜色 */
box-shadow: inset 0 0 10px red; /* 内阴影 */
box-shadow: 0 0 0 4px blue; /* 边框效果 */
/* 边框图片 */
border-image: url(border.png) 30 round;
/* 背景增强 */
background-size: cover; /* 覆盖整个区域 */
background-size: contain; /* 完整显示 */
background-origin: content-box; /* 背景起始位置 */
background-clip: padding-box; /* 背景裁剪区域 */
/* 多重背景 */
background:
url(img1.png) no-repeat top left,
url(img2.png) no-repeat bottom right,
linear-gradient(to bottom, red, blue);
3. 文本效果
/* 文字阴影 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
/* 文本溢出 */
text-overflow: ellipsis;
/* 自动换行 */
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;
/* 文字描边（WebKit） */
-webkit-text-stroke: 2px red;
-webkit-text-fill-color: transparent;
/* 文字排版 */
writing-mode: vertical-rl; /* 竖排文字 */
4. 颜色与渐变
/* 新颜色格式 */
color: rgba(255, 0, 0, 0.5); /* 带透明度的 RGB */
color: hsla(120, 100%, 50%, 0.5); /* 色相、饱和度、亮度 */
/* 线性渐变 */
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red 0%, blue 50%, green 100%);
/* 径向渐变 */
background: radial-gradient(circle, red, blue);
background: radial-gradient(ellipse at top, red, blue);
/* 重复渐变 */
background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
/* 锥形渐变 */
background: conic-gradient(from 45deg, red, blue, red);
5. 变换 (Transform)
/* 2D 变换 */
transform: translate(50px, 100px); /* 位移 */
transform: rotate(45deg); /* 旋转 */
transform: scale(1.5); /* 缩放 */
transform: skew(30deg, 20deg); /* 倾斜 */
transform: translateX(50px) rotate(45deg) scale(1.5); /* 组合 */
/* 3D 变换 */
transform: translate3d(50px, 100px, 200px);
transform: rotate3d(1, 1, 1, 45deg);
transform: perspective(500px) rotateY(45deg);
/* 变换原点 */
transform-origin: center center;
transform-origin: top left;
6. 过渡 (Transition)
/* 基本过渡 */
transition: all 0.3s ease;
/* 详细设置 */
transition-property: width, height; /* 过渡属性 */
transition-duration: 0.3s; /* 持续时间 */
transition-timing-function: ease-in-out; /* 时间函数 */
transition-delay: 0.1s; /* 延迟 */
/* 时间函数 */
transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 贝塞尔曲线 */
7. 动画 (Animation)
/* 定义关键帧 */
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* 应用动画 */
.element {
animation: slideIn 0.5s ease-out forwards;
animation: bounce 1s infinite;
}
/* 详细控制 */
animation-name: slideIn;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite; /* 播放次数 */
animation-direction: alternate; /* 往返播放 */
animation-fill-mode: forwards; /* 保持结束状态 */
animation-play-state: paused; /* 播放状态 */
8. Flexbox 弹性布局
/* 容器 */
.container {
display: flex;
flex-direction: row; /* 主轴方向 */
flex-wrap: wrap; /* 换行 */
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
align-content: space-between; /* 多行对齐 */
gap: 20px; /* 间距 */
}
/* 项目 */
.item {
flex: 1; /* 占据剩余空间 */
flex-grow: 1; /* 放大比例 */
flex-shrink: 0; /* 缩小比例 */
flex-basis: 200px; /* 基础大小 */
align-self: flex-end; /* 单独对齐 */
order: 1; /* 排列顺序 */
}
9. Grid 网格布局
/* 容器 */
.container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 三列 */
grid-template-rows: 100px auto 100px; /* 三行 */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
gap: 20px;
}
/* 项目定位 */
.item {
grid-column: 1 / 3; /* 跨列 */
grid-row: span 2; /* 跨行 */
grid-area: header; /* 命名区域 */
justify-self: center; /* 水平对齐 */
align-self: center; /* 垂直对齐 */
}
10. 媒体查询 (Media Queries)
/* 响应式断点 */
@media screen and (max-width: 768px) {
/* 平板样式 */
}
@media screen and (max-width: 480px) {
/* 手机样式 */
}
@media screen and (min-width: 1200px) {
/* 大屏样式 */
}
/* 其他媒体特性 */
@media (orientation: landscape) { }
@media (prefers-color-scheme: dark) { }
@media (prefers-reduced-motion: reduce) { }
@media print { }
11. 其他重要特性
/* 盒子模型增强 */
box-sizing: border-box; /* 怪异盒模型 */
/* 溢出处理 */
overflow-x: auto;
overflow-y: hidden;
/* 裁剪 */
clip-path: circle(50%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
/* 遮罩 */
mask-image: url(mask.png);
/* 滤镜 */
filter: blur(5px);
filter: brightness(1.2);
filter: contrast(1.5);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: drop-shadow(0 0 10px red);
/* 混合模式 */
mix-blend-mode: multiply;
mix-blend-mode: overlay;
/* 滚动行为 */
scroll-behavior: smooth;
/* 用户选择 */
user-select: none;
/* 指针事件 */
pointer-events: none;
/* 容器查询（CSS4） */
@container (min-width: 400px) {
.card { flex-direction: row; }
}
深入理解
CSS3 模块化
CSS3 不再是一个大规范，而是分为多个模块独立发展：
| 模块 | 说明 |
|---|---|
| Selectors Level 3/4 | 选择器 |
| Color Module Level 3/4/5 | 颜色 |
| Backgrounds and Borders | 背景和边框 |
| Text Decoration | 文本装饰 |
| Fonts Module | 字体 |
| Writing Modes | 书写模式 |
| Flexible Box Layout | Flexbox |
| Grid Layout | Grid |
| Transforms | 变换 |
| Transitions | 过渡 |
| Animations | 动画 |
渐进增强策略
/* 基础样式 */
.button {
background: blue;
}
/* 增强样式 */
@supports (background: linear-gradient(to right, red, blue)) {
.button {
background: linear-gradient(to right, blue, purple);
}
}
面试要点
- 能够分类列举 CSS3 的主要新特性
- 能够写出常用的选择器、动画、变换代码
- 理解 Flexbox 和 Grid 的使用场景
- 了解渐进增强和优雅降级策略
- 知道哪些特性需要浏览器前缀（现在大多不需要了）