更灵活的布局方式
以前做网页布局，靠的是浮动和定位，调起来费劲还容易出问题。现在有了CSS3的Flexbox和Grid，排版变得直观多了。比如用Flex，三行代码就能实现一个水平垂直居中的盒子：
.container {<br> display: flex;<br> justify-content: center;<br> align-items: center;<br>}手机页面上常见的顶部导航栏、商品卡片排列，用Grid划分区域特别顺手，不用再算margin和padding到底该设多少。
动效不再依赖JavaScript
想让按钮点击时有个缩放效果？以前得靠JS绑定事件，现在直接用transition就行：
.btn {<br> transition: transform 0.3s ease;<br>}<br><br>.btn:hover {<br> transform: scale(1.1);<br>}轮播图翻页、下拉菜单展开，这些交互用transform配合transition就能搞定，页面更轻快，也不用引入一堆动画库。
自定义字体与图标
@font-face规则让设计师能自由使用非系统字体。比如网站想用某种手写体标题，只需上传字体文件：
@font-face {<br> font-family: 'MyHandwriting';<br> src: url('handwriting.woff2') format('woff2');<br>}<br><br>h1 {<br> font-family: 'MyHandwriting', sans-serif;<br>}现在连图标都可以用字体实现，一个icon标签换个class就能显示不同图案，比切图方便多了。
响应式设计的基石
媒体查询（@media）让同一套代码适配手机、平板和桌面。比如在小屏幕上把侧边栏收成汉堡菜单：
@media (max-width: 768px) {<br> .sidebar {<br> display: none;<br> }<br> .menu-btn {<br> display: block;<br> }<br>}这功能在电商页面特别实用，商品详情页在手机上看不会挤成一团。
背景与渐变的多样化
CSS3支持多层背景图叠加，还能直接画渐变色。做个半透明遮罩效果再也不用切图了：
.hero {<br> background: <br> linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),<br> url('banner.jpg');<br> background-size: cover;<br>}旅游类网站的横幅图常用这种手法，文字盖在图片上也能清晰 readable。