CSS3 是 CSS 的最新版本，它引入了许多新特性，包括更强大的选择器、阴影、动画、变换等。以下是一些主要的 CSS3 新特性：
选择器（Selectors）：
- 属性选择器：可以根据属性来选择元素。
- 结构伪类选择器：如
:first-child,:last-child,:nth-child()等。 - 伪元素：使用
::before和::after创建内容。
阴影和背景（Shadows and Backgrounds）：
box-shadow：为元素添加阴影。border-radius：可以创建圆角。background-size：可以调整背景图片的大小。
动画（Animations）：
@keyframes：定义动画序列。animation：应用动画到元素上。
变换（Transitions）：
transform：包括旋转（rotate）、缩放（scale）、平移（translate）、倾斜（skew）等。transition：应用过渡效果到属性上。
媒体查询（Media Queries）：
- 可以根据设备的屏幕大小和分辨率来应用不同的样式。
字体（Fonts）：
@font-face：允许在网页中使用自定义字体。
边框和阴影（Border and Outline）：
border-image：设置图片作为边框。border-radius：创建圆角边框。outline：设置元素的轮廓，不会影响布局。
伪元素（Pseudo-elements）：
::selection：可以自定义用户选中文本的样式。
渐进增强（Progressive Enhancement）：
- CSS3 中的许多特性可以用于优化现有网站，而不会破坏旧的浏览器。
示例代码：
/* 圆角边框和阴影 */
div {
border: 1px solid #000;
border-radius: 10px; /* 创建圆角 */
box-shadow: 5px 5px 10px #888; /* 添加阴影 */
}
/* 渐变背景 */
div {
background: linear-gradient(to right, red, yellow);
}
/* 键帧动画 */
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
/* 应用动画 */
div {
animation-name: example;
animation-duration: 4s;
}
/* 媒体查询 */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* 自定义字体 */
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff') format('woff');
}
body {
font-family: 'MyCustomFont', sans-serif;
}CSS3 提供了丰富的样式和动画功能，使得网页设计师和开发者可以创建更加引人入胜的网页。