CSS3照片墙布局教程兼容主流浏览器

CSS3 的照片墙，真的是前端开发里一个又好玩又实用的经典小项目。尤其是用Flexbox和Grid这俩布局方式，随便几行代码，效果就能做得挺炫。你用display: flex配合justify-content: space-between，图片自动排好行；要控制得更精细，用display: grid加上列数定义，分分钟搞定响应式。

阴影、过渡这些小动效，用box-shadow、transition一加，交互一下子高级了不少。配合max-width: 100%和height: auto，保证在手机上展示也不走样。嗯，动画控的话，:hover加个transform: scale(1.1)也蛮有感觉。

浏览器兼容？放心，-webkit-、-moz-这些前缀加上，稳得。或者直接用Autoprefixer自动加前缀，省心省力。，这个 CSS3 照片墙，不但样子好看，写起来也真不费劲，新手上手也没什么门槛。如果你正好想做个图片展示页，这套做法还挺适合的。

感兴趣的你可以看看这些相关资料：照片墙 css3、多列布局应用，还有CSS 选择器的进阶用法，搭配起来玩更溜。