在 CSS3 中引入了许多新的属性和特性,以下是其中一些主要的:
-
Flexbox(弹性盒子布局):通过
display: flex
及其相关属性,实现灵活的布局方式,使得元素在容器中可以自动调整大小和位置。 -
Grid(网格布局):通过
display: grid
及其相关属性,实现二维网格布局,使得元素可以以行和列的方式进行排列。 -
Transitions(过渡效果):通过
transition
属性,实现在状态改变时,元素样式平滑过渡的效果,如颜色、大小、位置等。 -
Animations(动画效果):通过
@keyframes
规则和animation
属性,实现更复杂的动画效果,可以控制元素的逐帧动画行为。 -
Transforms(变形):通过
transform
属性,实现元素的旋转、缩放、倾斜和移动,而无需改变文档布局。 -
Media Queries(媒体查询):通过
@media
规则,根据设备或浏览器的特定特性(如宽度、高度、分辨率等)来应用不同的样式。 -
Box Shadow(阴影效果):通过
box-shadow
属性,为元素添加阴影效果,可以设置阴影的颜色、大小、模糊度和偏移量。 -
Border Radius(边框圆角):通过
border-radius
属性,为元素的边框添加圆角效果,使其边角变得圆滑。 -
Gradient(渐变):通过
linear-gradient
和radial-gradient
函数,实现背景色的渐变效果,可以创建平滑过渡的色彩效果。 -
Custom Fonts(自定义字体):通过
@font-face
规则,引入并使用自定义字体文件(如woff、woff2),使得网页能够显示设计师选择的字体样式。
这些新属性和特性使得开发者能够更加灵活和精确地控制页面的外观和行为,提升用户体验和视觉吸引力。
希望可以帮到大家;