记一些不太常用但很有用的CSS3新特性

选择器

• el[attribute^=value]: 选择某元素attribute属性是以value开头的。
• el[attribute$=value]: 选择某元素attribute属性是以value结尾的。
• el[attribute*=value]: 选择某元素attribute属性包含value字符串的。
• element1~element2: 选择前面有element1元素的每个element2元素。
• el:only-of-type: 选择属于其父元素唯一的el元素的每个el元素。
• el:only-child: 选择属于其父元素的唯一子元素的每个el元素。
• :root: 选择文档的根元素。
• el:empty: 选择没有子元素的每个el元素（包括文本节点)。
• el:target: 选择当前活动的el元素。
• el:not(selector): 选择非selector元素的每个元素。
• el::selection: 选择被用户选取的元素部分。

背景

• background-clip
  规定背景的绘制区域

div {
  background-color: yellow;
  background-clip: content-box | border-box | padding-box;
}

• background-origin
  规定背景的的起始位置，用法跟background-clip一样，但是有差别，其中一个差别是：background-clip的值为border-box时，背景并不会被边框覆盖，但background-origin则相反。

div {
  background-color: yellow;
  background-origin: content-box | border-box | padding-box;
}
/*需要注意的是，值为border-box时需要边框是透明的，否则会覆盖住背景的边界位置*/

文字效果

• word-wrap
  强制文本换行 (英文文本需谨慎使用，会直接断开单词) ，元素需为块级元素。

p {
  word-wrap: normal | break-word;
}
/* normal: (默认值)只在允许的断字点换行 */
/* break-word:  在长单词或 URL 地址内部进行换行 */

• word-break
  用于处理单词折断

p {
  word-break: normal | break-word | break-all | keep-all;
}
/* normal: 默认换行规则 */
/* break-word: 保持单词或URL的完整性，即不在内部换行 */
/* break-all:  在长单词或 URL 地址内部进行换行 */
/* keep-all: 只能在半角空格或连字符处换行。*/

• text-fill-color
  设置文字内部填充颜色
• text-stroke-color
  设置文字边界填充颜色
• text-stroke-width
  设置文字边界宽度

多列布局

通过CSS3，能够创建多个列来对文本进行布局，IE10和Opera支持多列属性。Firefox 需要前缀-moz-，Chrome和Safari需要前缀-webkit-。主要有如下三个属性：
1.column-count: 规定元素应该被分隔的列数。
2.column-gap: 规定列之间的间隔。
3.column-rule: 设置列之间的宽度、样式和颜色规则

div {
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari 和 Chrome */
  column-count:3;
  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari 和 Chrome */
  column-gap:40px;
  -moz-column-rule:3px outset #ff0000; /* Firefox */
  -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
  column-rule:3px outset #ff0000;
}

用户界面

• resize
  resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性

div {
  resize:  none | both | horizontal | vertical;
  overflow: auto;
}

• outline-offset
  outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓，与outline配合使用。IE和Opera暂不支持该属性

div {
  margin:20px;
  width:150px;
  padding:10px;
  height:70px;
  border: 1px solid #333;
  outline: 2px solid red;
  outline-offset: 15px;
}