# css3

CSS3学习笔记：使用分栏布局实现瀑布流效果 纯css实现瀑布流效果 今天记录的是我毕设中着重体现的布局风格—瀑布流布局。 说到瀑布流布局，先上张图片来说明一下什么是瀑布流好了。 CSS3：属性介绍 属性名 介绍 columns CSS3 columns 属性，是复合属性，设置或检索对象的列数和每列的宽度。 column-width CSS3 column-width 属性，设置或检索对象每列的宽度 column-count CSS3 column-count 属性，设置或检索对象的列数 column-gap CSS3 column-gap 属性，设置或检索对象的列与列之间的间隙 column-rule CSS3 column-rule 属性，是复合属性。设置或检索对象的列与列之间的边框。 column-rule-width CSS3 column-rule-width 属性，设置或检索对象的列与列之间的边框厚度。 column-rule-style CSS3 column-rule-style 属性，设置或检索对象的列与列之间的边框样式。 column-rule-color CSS3

CSS3学习笔记：蒙版 倒影 hsla模式 效果 最近才知道 ⊙ω⊙ css3还可以有ps的蒙版 倒影 hsla模式 效果顿时感觉css3很强大啊！ css3以前就知道有动画属性，现在知道有了css3有蒙版 倒影 hsla模式 终于不不用为了就几张图的效果 打开那个麻烦的ps修图，然后又要重新上传一次图太麻烦。 由于此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用蒙版 倒影 hsla模式需要添加-webkit和前缀 一.蒙版 -webkit-mask-image: url(蒙版图片路径) | 使用渐变作为蒙版; -webkit-mask-repeat: no-repeat | repeat | repeat-x | repeat-y; -webkit-mask-position: center;//定位居中 二.倒影 -webkit-box-reflect: 方向 偏移量 图片效果; 方向 none :此值为box-reflect默认值，表示无倒影效果； above :表示生成的倒影在对象（原图）的上方； below :表示生成的倒影在