🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
CSS3作为CSS技术的最新版本，带来了众多强大且实用的新特性，极大地丰富了网页设计的可能性，提升了用户体验。以下是对CSS3新增特性的详细介绍。
选择器
- 属性选择器 ：CSS3进一步扩展了属性选择器的功能。例如，
[attr^=value]表示选择属性值以指定值开头的元素，[attr$=value]表示选择属性值以指定值结尾的元素，[attr*=value]表示选择属性值包含指定值的元素。这使得开发者能够更精确地选择具有特定属性值的元素，而无需依赖额外的类名或ID。 - 伪类选择器 ：新增了许多伪类选择器，如
:nth - child(n)、:nth - of - type(n)、:first - of - type、:last - of - type、:only - of - type、:only - child等。:nth - child(n)可以根据元素在其父元素中的位置来选择元素，n可以是具体的数字、表达式或关键字，如even（偶数）、odd（奇数）。:nth - of - type(n)则是针对同类型元素进行定位。这些伪类选择器在实现复杂的布局和交互效果时非常有用。
盒模型
CSS3引入了box - sizing属性，允许开发者更灵活地控制元素的盒模型。其取值有content - box（默认值）、border - box和padding - box。当设置为border - box时，元素的宽度和高度包括了边框和内边距，这使得在进行布局时更容易计算和控制元素的实际大小，避免了因边框和内边距的添加而导致元素超出预期尺寸的问题。
背景和边框
- 背景 ：CSS3支持多背景图像，通过
background - image属性可以指定多个图像，以逗号分隔，图像会按照指定的顺序堆叠。还可以通过background - size属性来调整背景图像的大小，取值可以是具体的长度值、百分比或关键字cover（覆盖整个元素）、contain（包含在元素内）。此外，background - clip属性允许裁剪背景，使其只显示在元素的内容区域、内边距区域或边框区域内。 - 边框 ：新增了
border - radius属性来实现圆角边框，通过设置不同的值可以创建出各种圆角效果，甚至是圆形。box - shadow属性用于添加盒子阴影，可设置阴影的颜色、偏移量、模糊半径和扩散半径等参数，为元素营造出立体感。border - image属性允许使用图像来绘制元素的边框，通过指定图像源、切片方式、重复方式等，可以创建出各种独特的边框效果。
文本效果
- 文本阴影 ：
text - shadow属性用于为文本添加阴影，使文本更加突出和有层次感。可以设置阴影的颜色、水平和垂直偏移量、模糊半径等参数。 - 文字换行 ：
word - wrap属性（现在推荐使用overflow - wrap）可以控制当文本超出容器宽度时的换行方式，取值break - word允许在单词内换行，以避免单词溢出容器。text - overflow属性用于处理文本溢出容器时的显示方式，通常与white - space: nowrap和overflow: hidden结合使用，可实现省略号显示等效果。
2D和3D转换
- 2D转换 ：CSS3通过
transform属性实现2D转换，包括平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）等操作。例如，transform: translate(50px, 100px)可以将元素在水平方向移动50像素，垂直方向移动100像素；transform: rotate(45deg)可以将元素顺时针旋转45度。 - 3D转换 ：同样基于
transform属性，通过perspective属性设置透视效果，transform - style属性设置子元素的3D呈现方式，以及rotateX、rotateY、rotateZ等函数来实现元素在三维空间中的旋转。例如，transform: rotateX(45deg)可以使元素绕X轴旋转45度，创建出立体的视觉效果。
过渡和动画
- 过渡 ：
transition属性允许定义元素属性值在一定时间内的平滑过渡效果。通过指定过渡的属性、持续时间、延迟时间和过渡函数，可以实现元素在状态改变时的渐变动画，如鼠标悬停时元素的颜色、大小、位置等属性的变化。 - 动画 ：
@keyframes规则用于定义动画的关键帧，然后通过animation属性将动画应用到元素上。可以设置动画的名称、持续时间、播放次数、方向、填充模式等参数，实现复杂的动画效果，无需依赖JavaScript或Flash。
多列布局
CSS3提供了多列布局的功能，通过column - count属性指定列数，column - width属性指定列的宽度，column - gap属性指定列之间的间隙，column - rule属性指定列之间的分隔线样式。这使得在网页上实现类似报纸、杂志的多列排版变得更加容易。
弹性盒布局（Flexbox）
弹性盒布局是CSS3中一种强大的布局模式，通过将父元素设置为display: flex，可以方便地控制子元素在水平或垂直方向上的排列方式、对齐方式和伸缩性。通过justify - content、align - items、align - content等属性，可以轻松实现各种复杂的响应式布局，使网页在不同屏幕尺寸下都能保持良好的视觉效果。
CSS3的这些新特性极大地增强了CSS的功能，使开发者能够更加高效地创建出美观、交互性强且具有良好用户体验的网页。随着浏览器对CSS3的支持不断完善，这些特性在现代网页设计中得到了广泛的应用。