CSS3引入了许多新特性和模块,以下是一些常见的CSS3新特性:
-
选择器增强:
- 属性选择器:支持更多的属性选择器,如属性值前缀、后缀、包含等。
- 伪类选择器:引入了新的伪类选择器,如
:nth-child()
、:nth-of-type()
等。
-
盒子模型:
- 边框圆角(border-radius):可以设置元素的边框圆角。
- 阴影效果(box-shadow):可以为元素添加阴影效果。
- 盒子大小(box-sizing):可以调整盒子模型的尺寸计算方式。
-
背景和渐变:
- 线性渐变(linear-gradient):可以创建水平或垂直方向的渐变背景。
- 径向渐变(radial-gradient):可以创建从一个中心点向外扩散的渐变背景。
-
文字和字体:
- @font-face:允许在网页中引用自定义字体文件。
- 文字阴影(text-shadow):可以为文字添加阴影效果。
- 多列文字(columns):可以创建多列布局的文字。
-
过渡和动画:
- 过渡效果(transition):可以实现元素在不同状态之间的平滑过渡。
- 关键帧动画(@Keyframes):可以定义动画的关键帧和动画效果。
- 动画属性(animation):用于指定动画的持续时间、重复次数等属性。
-
弹性布局(Flexbox):
- 引入了弹性布局模型,使元素在容器中的布局更加灵活和自适应。
-
响应式布局(Media Queries):
- 可以根据不同的媒体查询条件应用不同的样式,实现响应式布局。
-
变换和变形:
- 2D变换(transform):可以对元素进行平移、旋转、缩放等变换操作。
- 3D变换(transform):可以实现元素的三维空间变换效果。
-
过滤器(Filter):
- 可以应用各种视觉效果和图像处理效果,如模糊、亮度、对比度等。
-
多列布局(Multicolumn Layout):
- 可以将内容分为多列进行布局。
以上只是 CSS3 中的一些常见新特性,还有许多其他的新特性和模块,使得开发者可以更加灵活和高效地进行样式设计和布局。