選擇器
- el[attribute^=value]: 選擇某元素attribute屬性是以value開頭的预皇。
- el[attribute$=value]: 選擇某元素attribute屬性是以value結(jié)尾的。
- el[attribute*=value]: 選擇某元素attribute屬性包含value字符串的涕蜂。
- element1~element2: 選擇前面有element1元素的每個element2元素约素。
- el:only-of-type: 選擇屬于其父元素唯一的el元素的每個el元素仪吧。
- el:only-child: 選擇屬于其父元素的唯一子元素的每個el元素咒循。
- :root: 選擇文檔的根元素扶踊。
- el:empty: 選擇沒有子元素的每個el元素（包括文本節(jié)點)裙盾。
- el:target: 選擇當前活動的el元素实胸。
- el:not(selector): 選擇非selector元素的每個元素。
- el::selection: 選擇被用戶選取的元素部分番官。
背景
- background-clip
規(guī)定背景的繪制區(qū)域
div {
background-color: yellow;
background-clip: content-box | border-box | padding-box;
}
- background-origin
規(guī)定背景的的起始位置庐完，用法跟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 地址內(nèi)部進行換行 */
- word-break
用于處理單詞折斷
p {
word-break: normal | break-word | break-all | keep-all;
}
/* normal: 默認換行規(guī)則 */
/* break-word: 保持單詞或URL的完整性台颠，即不在內(nèi)部換行 */
/* break-all: 在長單詞或 URL 地址內(nèi)部進行換行 */
/* keep-all: 只能在半角空格或連字符處換行褐望。*/
- text-fill-color
設(shè)置文字內(nèi)部填充顏色 - text-stroke-color
設(shè)置文字邊界填充顏色 - text-stroke-width
設(shè)置文字邊界寬度
多列布局
通過CSS3，能夠創(chuàng)建多個列來對文本進行布局，IE10和Opera支持多列屬性瘫里。Firefox 需要前綴-moz-实蔽，Chrome和Safari需要前綴-webkit-。主要有如下三個屬性：
1.column-count: 規(guī)定元素應(yīng)該被分隔的列數(shù)减宣。
2.column-gap: 規(guī)定列之間的間隔盐须。
3.column-rule: 設(shè)置列之間的寬度、樣式和顏色規(guī)則
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 屬性規(guī)定是否可由用戶調(diào)整元素尺寸漆腌。如果希望此屬性生效，需要設(shè)置元素的 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;
}
