Cacher is the code snippet organizer for pro developers

下表列出了所有 CSS3 的新多列属性，点击属性可以查看更多内容以及用法：

属性	        说明                	CSS
column-count	指定元素应分为的列数	3
column-fill	指定如何填充列	3
column-gap	指定列之间差距	3
column-rule	一个用于设置所有列规则的简写属性	3
column-rule-color	指定的列之间颜色规则	3
column-rule-style	指定的列之间的样式规则	3
column-rule-width	指定的列之间的宽度规则	3
column-span	指定一个元素应该横跨多少列	3
column-width	指定列的宽度	3
columns	缩写属性设置列宽和列数	3


CSS3创建多列
column-count属性指定元素的列数应分为：

OperaSafariChromeFirefoxInternet Explorer实例
划分成三列的div元素的文本：

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}



CSS3的指定列之间的差距
column-gap属性指定的列之间的差距：

OperaSafariChromeFirefoxInternet Explorer实例
指定列之间40个像素差距：

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}



CSS3列规则
column-rule属性设置列之间的宽度，样式和颜色。

OperaSafariChromeFirefoxInternet Explorer实例
指定列之间的宽度，样式和颜色的规则：

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

实例
<style> 
@font-face
{
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div
{
   font-family:myFirstFont;
}
</style>

CSS3 单词拆分换行属性指定换行规则：

CSS代码如下：

实例
p.test1 { 
    word-break: keep-all;
} 
p.test2 { 
    word-break: break-all;
}

CSS3的换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
CSS代码如下：

OperaSafariChromeFirefoxInternet Explorer实例
允许长文本换行:

p {word-wrap:break-word;}

CSS3文本溢出属性指定应向用户如何显示溢出内容

实例
p.test1 { 
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000; 
    overflow: hidden; 
    text-overflow: clip; 
} 
p.test2 { 
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

div { box-shadow: 10px 10px;}
接下来给阴影添加颜色
实例
div { box-shadow: 10px 10px grey;}
接下来给阴影添加一个模糊效果
实例
div { box-shadow: 10px 10px 5px grey;}

你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果
实例
#boxshadow { 
    position: relative; 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
    padding: 10px; bac kground: white;
} 
#boxshadow img { 
    width: 100%; 
    border: 1px solid #8a4419; 
    border-style: inset;
} 
#boxshadow::after { 
    content: ''; 
    position: absolute; 
    z-index: -1; /* hide shadow behind image */ 
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */ 
    height: 100px; 
    bottom: 0;
}


阴影的一个使用特例是卡片效果
实例
div.card { 
    width: 250px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    text-align: center;
}

给标题添加阴影:

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

HTML5 <textarea>标签用于创建一个可以输入多行的文本框。请参考下述示例：

一个 HTML 文本区域：

<textarea rows="10" cols="30">
我是一个文本框。 
</textarea>

HTML5 <section>标签对文档中的内容进行分块或分段。请参考下述的示例：

文档的某个区域，解释了什么是 WWF ：

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

HTML5 <sub>和<sup>标签分别为文档中的内容定义下标和上标。请参考下述示例：

下标文本：

<p>这个文本包含 <sub>下标</sub>文本。</p>

HTML5 <rp> 标签用于为那些不能通过浏览器显示的<ruby>标签的内容提供支持。请参考下述示例：

一个 ruby 注释：

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

ruby 注释是中文注音或字符。在东亚使用，显示的是东亚字符的发音。

将 <rp> 标签与 <ruby> 和 <rt> 标签一起使用：
<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

HTML5 <q>标签用于定义一个短引用。请参考一下内容：

标记一个短的引用：

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

HTML5 <pre>标签可以对文档中的文本进行预格式化。请参考下述示例：

预格式化的文本:

<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

部分文本高亮显示：

<p>Do not forget to buy <mark>milk</mark> today.</p>

<h1>这是标题 1</h1>
<h1>这是标题 2</h1>
<h2>这是标题 3</h2>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

HTML5 使用 <hgroup> 对标题进行组合：

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> 

<em>	呈现为被强调的文本。
<strong>	定义重要的文本。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>	定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

<bdo dir="rtl">Here is some text</bdo>