CSS3（层叠样式表第3版）是用于描述 HTML 或 XML 文档的呈现和布局的一种样式表语言。CSS3 引入了许多新特性和模块，使得网页设计更加灵活、美观，也提高了页面的交互性和动画效果。下面将介绍一些 CSS3 的核心特性及其应用。
- CSS3 新特性
1.1 选择器
伪类选择器：如 :nth-child(), :last-child 和 :first-of-type 等，允许更精确地选择元素。
css
/ 选中父元素下的每个偶数子元素 /
li:nth-child(even) {
background-color: lightgray;
}
伪元素选择器：如 ::before, ::after，用于在元素内容前后插入内容。
css
p::after {
content: " - 结束";
}
1.2 边框与阴影
圆角边框：使用 border-radius 属性来创建圆角效果。
css
.box {
border: 1px solid black;
border-radius: 10px;
}
阴影效果：
box-shadow 用于为元素添加阴影。
text-shadow 用于为文本添加阴影。
css
.shadow-box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
1.3 背景
渐变背景：使用 linear-gradient 和 radial-gradient 创建渐变效果。
css
.gradient-background {
background: linear-gradient(to right, red, yellow);
}
背景裁剪：使用 background-clip 来控制背景的显示区域。
css
.text-background {
background: linear-gradient(to right, blue, green);
-webkit-background-clip: text;
color: transparent;
}
1.4 变换与过渡
变换：使用 transform 属性进行旋转、缩放、平移等操作。
css
.transform {
transform: rotate(45deg) scale(1.2);
}
过渡：使用 transition 属性实现元素状态变化时的平滑过渡效果。
css
.transition {
transition: background-color 0.5s ease;
}
.transition:hover {
background-color: blue;
}
1.5 动画
关键帧动画：使用 @keyframes 定义复杂的动画。
css
@keyframes example {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}
.animated {
animation: example 5s infinite;
}
- CSS3 媒体查询
CSS3 媒体查询允许根据设备的特性（如宽度、高度、分辨率等）应用不同的样式，适用于响应式设计。
css
/ 针对小屏幕设备 /
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
/ 针对较大屏幕设备 /
@media (min-width: 601px) {
body {
background-color: lightgreen;
}
}
- CSS3 Flexbox 和 Grid 布局
3.1 Flexbox
Flexbox 布局提供了一种一维布局模型，便于在容器内对元素进行排列和对齐。
css
.container {
display: flex;
justify-content: center; / 水平居中 /
align-items: center; / 垂直居中 /
}
.item {
flex: 1; / 每个项目占据相等空间 /
}
3.2 Grid
Grid 布局是一种二维布局模型，可以将页面划分为网格。
css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); / 三列 /
grid-gap: 10px; / 网格间距 /
}
.grid-item {
background-color: lightcoral;
}
浏览器兼容性
在使用 CSS3 特性时，需要注意不同浏览器的支持情况。通常可以通过添加前缀（如 -webkit-, -moz-, -ms-）来确保兼容性。此外，使用工具如 Can I use 可以查看特性在不同浏览器中的支持情况。总结
CSS3 为网页设计带来了丰富的视觉效果和布局可能性，使得开发者能够实现复杂而美观的用户界面。通过掌握 CSS3 的新特性，开发者可以创建响应式、动态且富有吸引力的网页。无论是简单的样式调整还是复杂的动画效果，CSS3 都能提供强大的支持。
