CSS3引入了大量新特性，让开发者可以创造出更加丰富、精美的视觉效果，而不需要依赖JavaScript和图片。从布局到动画，从渐变到滤镜，CSS3提供了强大的工具来美化网站。掌握这些特性，可以让网站更具视觉吸引力，同时保持良好的性能。
弹性布局Flexbox
Flexbox是CSS3引入的最重要的布局方式之一，它解决了传统布局的很多痛点。使用flexbox可以轻松实现水平垂直居中、等分布局、响应式调整等复杂需求。flex-direction控制主轴方向，justify-content控制主轴对齐，align-items控制交叉轴对齐。
Flexbox特别适合组件布局，如导航栏、卡片、表单等。只需在父元素设置display: flex，子元素就会成为flex item，可以方便地控制对齐、顺序、大小等。flex: 1可以实现自动填充剩余空间，非常适合响应式布局。
网格布局Grid
Grid布局是CSS3最强大的布局系统，是二维布局方案。相比Flexbox的一维布局，Grid可以同时控制行和列，适合复杂的页面布局。只需定义grid-template-columns和grid-template-rows，就可以创建精确的网格系统。
Grid的fr单位表示可用空间的比例，比百分比和像素更灵活。grid-area可以让元素跨越多个网格单元，实现复杂布局。Grid自动对齐、间距控制等功能，让布局代码更简洁。Grid特别适合整体页面布局，而Flexbox适合组件内部布局。
CSS变量
CSS自定义属性（CSS Variables）允许定义可重用的值，通过var()函数引用。这不仅提高代码复用性，也使得主题切换、动态样式变得容易。CSS变量可以定义在:root选择器中使用全局，或者定义在特定元素中限定作用域。
定义主题颜色、字体大小、间距等常用值作为变量，修改主题只需修改变量的值。还可以通过JavaScript动态修改变量值，实现运行时主题切换。CSS变量支持级联和继承，提供强大的样式控制能力。
渐变和阴影
linear-gradient和radial-gradient可以创建精美的渐变效果，无需图片。渐变可以用作背景、边框、文字等。从简单的两色渐变到复杂的多色渐变，从线性到径向，提供了丰富的视觉效果。
box-shadow和text-shadow为元素添加阴影，增加深度感。可以设置阴影的颜色、模糊距离、偏移量等参数。多重阴影可以创造更复杂的立体效果。阴影不仅美观，还能提升内容的可读性和层次感。
过渡和动画
transition属性可以让属性变化具有平滑的过渡效果。只需设置transition-property、transition-duration等，元素状态改变时就会有过渡动画。hover、focus、active等状态变化都可以有过渡效果，提升交互体验。
animation属性提供更强大的动画能力，可以创建复杂的动画序列。通过@keyframes定义关键帧，控制动画的每个阶段。结合transform和opacity，可以创造流畅的动效。但要适度使用动画，避免过度设计影响性能。
滤镜效果
filter属性可以为元素应用各种滤镜效果。blur模糊、brightness亮度、contrast对比度、saturate饱和度、hue-rotate色相旋转等。多个滤镜可以组合使用，创造丰富的视觉效果。
滤镜特别适合hover效果，如hover时稍微提高亮度或饱和度，可以提示用户可交互性。模糊效果可以创造景深，突出重要内容。但要控制性能，复杂滤镜可能影响渲染性能。
媒体查询进阶
CSS3的媒体查询不仅仅是@media (max-width: 768px)这样简单的断点。可以查询设备类型、屏幕方向、分辨率、颜色能力等特性。@media (prefers-color-scheme: dark)可以检测暗色模式，@media (prefers-reduced-motion)可以检测用户是否偏好较少动画。
结合容器查询（Container Queries），可以根据父元素的大小而非视口大小调整样式，使组件更加独立和可复用。这些高级媒体查询让响应式设计更加精细和强大。
优化与兼容性
使用CSS3特性要注意浏览器兼容性。可以使用Caniuse等工具查询支持情况。对于不支持的浏览器，要提供fallback样式。使用autoprefixer等工具自动添加浏览器前缀。
性能也要考虑。复杂的CSS效果、过多的动画、大型渐变可能影响性能。使用will-change属性声明可能变化的属性，让浏览器提前优化。但不要过度使用，避免资源浪费。
CSS3为现代网站开发提供了强大的工具。通过Flexbox和Grid实现复杂布局，使用渐变、阴影、过渡、动画提升视觉效果，结合媒体查询实现响应式设计。但要注意适度使用，保持性能，提供良好的用户体验。CSS3不仅是美化工具，更是提升用户满意度的重要手段。