选择器
- 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;
}
