css3有哪些新特性：核心能力汇总

css3有哪些新特性，核心是在CSS2.1基础上新增选择器、盒模型优化、视觉变换、动画过渡、多列布局、渐变阴影、媒体查询等模块，W3C将CSS3拆分为多个独立模块发布，不再采用单一规范版本，前端开发者可以按需引入对应模块能力，适合做响应式页面、动效界面、复杂排版场景；旧版IE8及更早浏览器对大部分css3新特性支持度很低，需要配合降级方案，不适合需要兼容IE8的老旧政务系统页面直接使用。

css3有哪些新特性：选择器与盒模型模块

css3新增一批伪类与属性选择器，伪类包含:nth-child()、:last-child、:not()、:checked，属性选择器支持根据标签属性值匹配元素，例如input[type="text"]可以精准选中指定类型表单控件。盒模型新增box-sizing属性，取值为border-box时，元素设置的宽高会包含内边距与边框，不再把padding、border额外叠加到宽度之外，你在写栅格布局时使用该属性，能大幅降低宽度溢出的计算成本。

弹性盒子Flex是css3布局模块，通过display:flex开启，主轴与交叉轴可以控制子元素对齐、伸缩、排序，适合一维方向的排列布局，比如导航栏、卡片横向排布。网格布局Grid同样属于css3布局模块，display:grid开启后支持二维行列控制，可以同时定义行轨道与列轨道，适合整页版式搭建。

css3有哪些新特性：视觉渲染相关新特性

变换transform支持rotate旋转、scale缩放、translate位移、skew倾斜，配合transform-origin可以自定义变换原点，元素变换不会脱离文档流，不会挤占其他元素原本占位。过渡transition可以给属性变化添加平滑动画，指定属性、时长、缓动函数、延迟时间，鼠标悬停变色、尺寸切换这类交互，不需要JavaScript持续修改样式就能实现平滑过渡。

动画@keyframes与animation是独立关键帧动画，你可以在关键帧里定义多段样式状态，animation控制播放时长、循环次数、播放方向，相比transition，它支持多阶段复杂动画，不受单一属性触发限制。渐变分为linear-gradient线性渐变与radial-gradient径向渐变，可直接作为背景填充，不需要额外引入图片资源，降低页面请求数量。

圆角border-radius、盒阴影box-shadow、文字阴影text-shadow属于常用视觉属性，border-radius可以单独设置四个角弧度，box-shadow支持设置偏移、模糊半径、扩展半径与阴影颜色，多层阴影可以叠加书写。透明度新增rgba颜色模式，第四个参数控制通道透明度，和opacity区别在于，opacity会让元素内部所有子内容同步透明，rgba仅作用于当前颜色本身。

css3有哪些新特性：排版、媒体查询与其他模块

多列布局column-count、column-width、column-gap实现类似报纸分栏排版，自动把长文本拆成多列，适合长文阅读页面。媒体查询@media是响应式核心，根据视口宽度、设备类型匹配样式规则，在不同屏幕尺寸切换布局，W3C在CSS3MediaQueries模块定义这套语法，是响应式网页的基础能力。

边框图片border-image可以把图片切片填充到元素边框，自定义边框纹理；自定义属性也就是CSS变量，通过--var-name定义，var()读取调用，支持动态修改，方便统一管理主题色。还有文字换行、换行断字、背景多图background-image多图层叠加，这些模块补充了CSS2.1缺失的排版与背景能力。

部分css3新特性在低版本浏览器存在渲染差异。

你在生产项目使用时，可以通过caniuse网站查询目标浏览器的支持率，对不支持的属性添加前缀-webkit-、-moz-，或者编写备用样式，避免页面在旧浏览器出现布局错乱。需要区分一点，CSS变量虽然常被归入css3生态，但它后续在CSSHoudini与现代规范持续迭代，部分新语法不属于最初css3原始模块定义范围。