使用CSS3实现多列布局与多背景的技巧
我要评论多列布局
CSS多列布局继承自块级布局模式，允许简单地定义多列文本。 一行太长的文字读起来很麻烦；当人眼从一行过长的文字末端移动到下一行开始处，就容易弄错到底该读哪一行。因此，为了最优化使用大的显示屏幕，设计者应该限制文字段落的宽度而并排排列，就像报纸一样。
糟糕的是如果不使用CSS和HTML在特定的位置强制换行，或者严格限制文本中允许的标记，或者夸张地使用脚本的话，这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。
列计数器和宽度
有两个CSS属性控制是否实现多列布局和显示多少列： column-count and column-width。
属性 column-count 设置特定数量的列数。例如，
- <div style="column-count:2;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum</div>
会以两列的方式显示内容：(如果你正使用支持多列布局的浏览器的话):
属性 column-width 设置期望的最小列宽。如果 column-count 没有设置，那么浏览器就会以合适的宽度尽量显示更多的列。
- <div style="column-width:20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum</div>
变成：
在多列块中，内容会自动从一列换到另一列中。所有 HTML， CSS 和 DOM 功能在列之间都得到支持, 比如编辑和打印。
columns 属性简写
多数时候，网页设计者都会使用 column-count 和 column-width 的一个. 由于它们的值没有重叠，一般使用简写属性 columns。例如，
CSS声明 column-width:12em 可替换成：
- <div style="columns:12em">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum</div>
CSS声明 column-count:4 可替换成：
- <div style="columns:4">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum</div>
CSS声明 column-width:8em 和 column-count:12 可替换成：
- <div style="columns:12 8em">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum</div>
高度平衡
CSS3多列规范需要列高平衡：即，浏览器自动设置最大列高，因此每列中的内容高度大致相同。Firefox浏览器是这样的。
然而，一些情况下，明确设置最大列高也是有用的，这样内容从第一列开始，尽可能多的生成列，甚至会溢出右边沿。因此，如果通过设置height 或 max-height 属性来限制列高，在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效。
列间隙
列之间有缝隙。建议值为1em。该值可通过设置多列模块的 column-gap 属性来修改：
- <div style="column-width:20em; column-gap:2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum</div>
优雅降级
多列属性会被不支持多列模型的浏览器忽略。因此，为这些浏览器创建单列结构而为支持多列的浏览器创建多列结构相对来说比较简单。
注意不是所有的浏览器都支持不带前缀的属性名。为了在大多数现代浏览器中应用这种特性，每个属性必须写三次： 一次用 -moz 前缀，一次用 -webkit 前缀，一次不使用前缀
多背景
通过使用 CSS3，你可以向元素应用多个背景。这些背景相互堆叠，第一个背景放在最上面，最后一个背景放在最下面。 仅最后一个背景允许拥有背景色。
指定多个背景很简单：
- .myclass {
- background: background1, background 2, ..., backgroundN;
- }
你既可以使用简写属性 background 也可以使用除 background-color 外的独立属性。即,，下面的属性可以用属性列表指定， 每个背景一个： background，background-attachment，background-clip, background-image，background-origin，background-position， background-repeat， background-size。
示例
该例中，三个背景进行堆叠：火狐标志,一个线性渐变， 和一张带有花的图片：
- .multi_bg_example {
- background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
- linear-gradient(to rightright, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
- url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
- background-repeat: no-repeat, no-repeat, repeat;
- background-position: bottombottom rightright, left, rightright;
- }
结果
相关文章
- 前几天在工作的时候遇到一个问题，项目需要实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，通过网上查找资料看到有人推荐可以使用Css3来实现，后来试了2016-11-08
- 这篇文章给大家介绍的是，利用CSS3实现当点击按钮的时候，按钮的背景是渐变动画的效果，实现后的效果非常好，开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受，感2016-10-19
- 这篇文章主要介绍了CSS3条纹背景制作的实战攻略,根据Forefox浏览器和webkit内核的浏览器两种情况来分别讲解,需要的朋友可以参考下2016-05-31
- 这篇文章主要介绍了用CSS3实现背景渐变的方法,作者并没有给出效果demo这个比较残念...需要的朋友可以参考下2015-07-14
- background-size是css3提供的一个新特性，它可以让你随心所欲的控制背景图片的大小。下面我们来一步步看看这个新特性都有什么值得我们惊艳的地方2014-09-02
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
使用CSS3 的背景渐变 -webkit-gradient ，用一个背景渐变的 DIV 代替图片。下面是实现效果示例，相比以上方案优点是不使用图片，减小请求量和流量2014-08-19- CSS背景动画很长时间以来都是一个热门话题，很多时候都是因为效果特别绚丽，而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画，答案是y2014-04-04
- CSS3之多背景background和CSS2的使用方法一样，只不过图片可以从1个图片变成多个图片了，其在CSS3的项目中运用比较广泛，大家有更好的案例要积极分享哟2013-10-18
- CSS3背景尺寸Background-size，这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小，下面为大家详细介绍下其语法、浏览器兼容及使用示例，感兴趣的朋友2013-10-14
- 这篇文章主要介绍了css3背景,CSS3规范中对背景这一部分，新加入了一些令人兴奋的功能，如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。2017-07-11
最新评论