CSS3新增選擇器與背景圖片的設定
CSS3新增選擇器與背景圖片的設定
1.選擇器
1.1基本選擇器
1.2（層次）關係選擇器
1.3動態偽類選擇器
1.4目標偽類選擇器
例：
#html:target h3{color:#f00;}
//點選a時，#html下的h3字型顏色改變
<a href="#html">點選a標籤時，修改#html的樣式</a>
<div id="html">
<h3>html是什麼</h3>
<p>html是xxx</p>
</div>
1.5 UI元素狀態偽類選擇器
1.6 結構選擇器
1.7 否定選擇器
1.8 屬性選擇器
Input[value]{background:red;}
Input[value=”abc”]{background:green;} 匹配屬性值一樣的元素
Input[value^=”abc”]{background:#ff0;} 匹配起始位置
Input[value$=”abc”]{background:#00f;} 匹配結束位置
Input[value*=”abc”]{background:#00f;} 無論任何位置都可以匹配到
<input type=”text”>
<input type=”text” value=”abc”>
<input type=”text” value=”def”>
<input type=”text” value=”abc_123”>
<input type=”text” value=”def_abc”>
1.9偽元素選擇器
：after 指定元素之後
：before 指定元素之前
：first-letter 對第一個字元的操作
P : first-letter{color:#f00}
：first-line 對第一行的操作
P : first-line{color:#ff0}
p：：selection 選中元素的一個操作（火狐不支援需要加字首-moz-）
p：：selection{color:#f00}
2.新增屬性
2.1文字的陰影
Eg：text-shadow:5px 5px 5px #f66，.....;//多個用逗號隔開
Eg：（引數形式為：X座標 Y座標 陰影模糊度 顏色）
2.2文字溢位text-overflow
值：clip 無省略號 ellipsis省略號
配合width和overflow:hidden和white-space:nowrap一塊使用
2.3文字換行word-wrap（預設一行顯示）
在長單詞或URL地址內部進行換行
2.4 字型圖示
@font-face{//字型匯入
font-family: name;//
src:url(設定路徑);
}
P{
font-family: name;
font-size: 100px;
}
2.5 背景屬性設定
2.5.1背景尺寸
Background-size:數值(水平)數值(垂直）;等比縮放（水平垂直）；
Background-size: cover ; 等比縮放到背景完全覆蓋（背景圖顯示不完全）；
例：配合/*background-position:center;*/使用；重要內容居中顯示
Background-size: contain ; 背景圖被包裹，可能會有區域留白；
2.5.2 背景圖片定位區域
Background-origin:border-box，padding-box，center-box;
（預設是以padding-box區域開始擺放）
2.5.3 背景最終顯示區域
Background-clip:border-box，padding-box，center-box;
(預設是以padding-box區域顯示)
2.5.4 多張背景圖設定
注意：多張背景圖是以逗號隔開
例：
background:url(路徑) no-repeat，
url(路徑) no-repeat，
url(路徑) no-repeat，
........;
2.6 邊框圓角 border-radius
例：
border-radius: 10px;
一個值表示上下左右
border-radius: 10px 20px;
第一個值表示左上角、右下角；第二個值表示右上角、左下角
border-radius: 10px 20px 30px;
第一個值表示左上角；第二個值表示右上角、左下角；第三個值表示右下角。
border-radius:10px 20px 30px 40px;
左上角 右上角 右下角 左下角
2.7 邊框圖片border-image
2.7.1 圖片匯入 border-image
border-image:url("url") A B C D/border-width；border-image中必須至少指定5個引數，
第一個引數作為邊框使用影象的路徑，
後4個引數表示影象進行分隔時的上邊距，右邊距，下邊距，左邊距
border-width:表示邊框的寬度
border-image: url(borderimage.png) 25 25 25 25/5px ；連寫
2.7.2 圖片路徑border-image-source:url();使用絕對或相對地址指定影象。
2.7.3 圖片剪裁border-image-slice:位置,其有1~4個引數.
2.7.4邊框圖片的平鋪 border-image-repeat:
repeat（重複）/round（平鋪）/stretch（拉伸）;重複性border-image-outset:邊框擴充套件
2.7.5 向外延伸 border-image-outset:數值；
2.8 邊框陰影 box-shadow
水平 垂直 模糊 延伸 顏色 [inset盒子內部](預設為外部)
例：
Box-shadow:0px 0px 0px 0px red [inset];//紅字可以為負值
2.9 漸進增強和優雅降級
2.9.1 漸進增強
針對低版本瀏覽器進行構建頁面，保證最基本的功能
2.9.2 優雅降級
一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容
2.9.3 區別
*優雅降級是從複雜的現狀開始
*漸進增強則是從一個非常基礎的，最低版本開始，不斷擴充，以適應未來環境的需要。
例：
.transition { /*漸進增強寫法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.transition { /*優雅降級寫法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}