css3新特性有哪些｜能直接落地的前端样式升级能力

当初刚接手移动端适配项目的时候，满脑子都在纠结传统CSS的局限，翻遍资料实操后才摸清css3新特性有哪些，这些全新的样式能力彻底改掉了以前写冗余代码的坏习惯，不用再靠JS、嵌套标签来实现复杂页面效果。

最早踩的坑，就是写圆角边框的时候。以前做卡片圆角、按钮圆角，只能用图片拼接或者复杂的边框代码，兼容性差还很难维护。第一次用上CSS3的border-radius属性时，直接一行代码就能实现任意弧度的圆角，不管是统一圆角还是单独设置四个角的差异化弧度，都能轻松搞定，完全不用折腾多余的静态资源。

然后是阴影效果的实操体验，这是我日常开发用得最多的新特性之一。传统CSS根本没办法给元素添加立体阴影，页面层级只能靠颜色深浅区分，显得特别单调。CSS3新增的box-shadow和text-shadow，前者可以给盒子元素添加外阴影、内阴影，还能调整模糊度、偏移量、阴影大小，后者专门用于文字阴影。上次做产品详情页，靠这两个属性纯CSS实现了卡片悬浮凸起、文字立体描边的效果，替代了原本需要多张PNG图片的方案，页面加载速度直接快了一截。

渐变属性也是彻底颠覆了我的写代码习惯。早前做渐变背景、渐变按钮，必须用PS导出渐变图片，不仅体积大，修改颜色、渐变方向都要重新作图。CSS3的linear-gradient线性渐变和radial-gradient径向渐变，支持自定义起止颜色、渐变角度、渐变范围，甚至能做多色叠加渐变。实操的时候发现它兼容性极好，主流浏览器全部适配，动态修改颜色参数也很方便，现在所有渐变样式，全程纯代码完成，再也不用依赖图片素材。

最解决开发痛点的，当属CSS3的弹性布局flex。以前做页面居中、自适应排版、多元素均分排列，要靠浮动、定位、margin padding微调，经常出现元素错位、塌陷、适配错乱的问题，每次调试布局都要耗很久。flex布局完全摒弃了浮动的弊端，通过display:flex开启布局后，仅用justify-content、align-items几个属性，就能轻松实现水平垂直居中、元素自适应拉伸、自动均分间距。上次做响应式导航栏，只用十几行flex代码，就搞定了移动端、桌面端的自动适配，对比传统布局，代码量直接减半。

还有变换与过渡动画特性，是轻量化交互的核心。transform属性可以实现元素的平移、缩放、旋转、倾斜，transition过渡动画能让元素的样式变化从生硬的瞬间切换，变成平滑的渐变效果。之前做按钮hover交互，传统写法只有单纯的颜色变化，加上CSS3的缩放变换和0.3秒过渡动画后，按钮悬浮放大、收起的效果流畅自然，不需要引入任何动画JS，性能损耗极低。

很多人容易忽略CSS3的选择器升级，这也是实用性拉满的新特性。新增的nth-child、nth-of-type、before、after伪类选择器，不用给每个元素单独加class类名，就能精准选中指定位置、指定类型的元素。写列表页面的时候，用nth-child(2n)直接给偶数行设置背景色，用伪类添加装饰图标、分割线，精简了大量冗余的class命名，代码结构变得特别干净。

最近一直在实操测试CSS3的rgba透明属性，和传统的opacity透明不一样，rgba只作用于元素本身的颜色、背景，不会让内部文字、子元素一起透明。做弹窗遮罩、半透明导航栏时，用rgba设置背景透明度，文字内容依旧清晰显示，完美解决了opacity的兼容弊端，现在所有半透明样式全部统一用这个属性实现。