一、【圓角效果】
border-radius: 5px 4px 3px 2px; border-top-right-radius:10px 右上解圓滑
二、【陰影效果】
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
box-shadow: 0 0 15px blue inset; 內(nèi)陰影
三、【顏色之RGBA】
color：rgba(R,G,B,A) 或 background-color:rgba(100,120,60,0.5);
四、【漸變色彩】
background-image:linear-gradient([to 設(shè)置方向]，[開始顏色]，[多種過度顏色]，[結(jié)束顏色])red（紅）orange（橙）yellow（黃）green（綠）blue（藍）black（黑）white（白）
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
★漸變透明 background-image: -webkit-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);}
五、【文字與字體】
1、設(shè)置溢出顯示省略號：
white-space: nowrap;（強制文本在一行內(nèi)顯示）
overflow: hidden; （溢出內(nèi)容為隱藏）
text-overflow: ellipsis;（三段配合使用尾段才顯示省略號…，clip表示溢出剪切）
2、嵌入字體
@font-face能夠加載服務(wù)器端的字體文件，讓瀏覽器端可以顯示用戶電腦里沒有安裝的字體。
@font-face {
font-family : 字體名稱;
src : 字體文件在服務(wù)器上的相對或絕對路徑;
}
3、文本陰影
text-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影顏色]
六、【背景設(shè)置】
1、設(shè)置元素背景圖片的原始起始位置 】
background-origin ：border-box（邊框）| padding-box（內(nèi)邊距）| content-box（內(nèi)容區(qū)域);
2、設(shè)置元素背景圖片裁剪
配合background-origin使用，圖片會根據(jù)它作為開始展示
background-clip ： border-box（邊框）| padding-box（內(nèi)填充）| content-box（內(nèi)容區(qū)域）| no-clip
3、設(shè)置背景圖片大小
background-size: auto | <長寬度值> | <百分比> | cover | contain
4、多重背景
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;
七、【偽類選擇器】
【偽類】偽類是對元素進行分類是基于特征(characteristics)而不是它們的名字、屬性或者內(nèi)容;原則上特征是不可以從文檔樹上推斷得到的。
1、 CSS3選擇器
屬性選擇器 元素[屬性^="屬性值"] 如：a[title*=more]{ background: orange;}
^是選擇開頭位置包含的
$是選擇結(jié)尾位置包含的
*是選擇任意位置包含的
作用：通過各種各樣的屬性給元素增加信息
2、:root
結(jié)構(gòu)性偽類選擇器—root :root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。
:root {background:orange;} 改變背景顏色
3、 :not
結(jié)構(gòu)性偽類選擇器—not :not選擇器稱為否定選擇器，可以選擇除某個元素之外的所有元素。
input:not([type="submit"]){border:1px solid red;}
<input type="text" />
<input type="file" />
<input type="submit" />
4、:empty
選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點內(nèi)容都沒有，哪怕是一個空格也是字符。
p:empty{display: none;}
5、:target
選擇器稱為目標選擇器，用來匹配文檔(頁面)的url的某個標志符的目標元素。（用記錨點的方式好記）
#bank:target{ color:blue;} <a href="#bank">顯示藍色</a> <div class="show" id="bank">愛你</div>
6、:first-child
選擇器表示的是選擇父元素的第一個子元素的元素E。簡單理解就是選擇父元素后面所有元素中的第一個元素，包含這個子元素的所有后代元素 如：將無序列表的第一個項目符號設(shè)置為紅色 ul > li:first-child
7、:last-child
選擇器表示的是選擇父元素的最后一個子元素的元素E。簡單理解就是選擇父元素后面所有元素中的最后一個元素，包含這個子元素的所有后代元素 如：將無序列表的第一個項目符號設(shè)置為紅色 ul > li:last-child
8、:nth-child(n)
選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數(shù)，而且可以是整數(shù)值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關(guān)鍵詞(odd、even)，但參數(shù)n的起始值始終是1，而不是0。
ol > li:nth-child(2n-1){ background-color:#CCC;}
9、正方向范圍
li:nth-child(n+6)
選中從第6個開始的子元素
10、負方向范圍
:nth-child(-n+9)
選中從第1個到第9個子元素。使用 :nth-child(-n+9) ，就相當讓你選中第9個和其之前的所有子元素
11、前后限制范圍
:nth-child(n+4):nth-child(-n+8)
選中第4-8個子元素。使用 nth-child(n+4):nth-child(-n+8) 我們可以選中某一范圍內(nèi)子元素，上面的例子里是從第4個到第8個子元素
12、奇數(shù)（單數(shù)）、偶數(shù)位（雙數(shù)）
:nth-child(odd)
:nth-child(even)
13、隔選擇子元素
:nth-child(3n+1),
選擇1,4,7,10
14、范圍高級用法
nth-child(n+2):nth-child(odd):nth-child(-n+9)
使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) 我們將會選中的子元素是從第2位到第9位，并且只包含奇數(shù)位。
15、:nth-last-child(n)
選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個“l(fā)ast”，所起的作用和“:nth-child(n)”選擇器有所區(qū)別，從某父元素的最后一個子元素開始計算，來選擇特定的元素。
16、:first-of-type
選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。
如：定位div容器中的第一個p元素（p不一定是容器中的第一個子元素），并設(shè)置其背景色為橙色。
<div class="wrapper">
<p>我是第一個段落</p>
<p>我是第二個段落</p>
<p>我是第三個段落</p>
<div>我是第一個Div元素</div>
<div>我是第二個Div元素</div>
<div>我是第三個Div元素</div>
</div>
.wrapper > p:first-of-type { background: orange;}（第一個）
.wrapper > p:last-of-type { background: orange;}（最后一個）
多種類型的元素用frist-of-type，同一種元素用frist-child,如有序列表
17、:nth-of-type(n)
選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數(shù)也一樣，可以是具體的整數(shù)，也可以是表達式，還可以是關(guān)鍵詞。
.wrapper > p:nth-of-type(2n){ background: orange;} （從第一個開始計起）
.wrapper > p:nth-last-of-type(2n){ background: orange;} （從最后一個開始計起）
18、:only-child
獨生子選擇器，選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。
.post p:only-child { background: orange;}
<div class="post"> <p>我是一個段落</p> <p>我是一個段落</p></div>
<div class="post"> <p>我是一個段落</p> </div>
19、:only-of-type
選擇器用來選擇一個元素是它的父元素的唯一一個相同類型的子元素。選擇父元素下面子元素中單一的一種類型的子元素時就可以適應(yīng)
我是一個段落文章來源地址http://www.zghlxwxcb.cn/news/detail-694918.html文章來源：http://www.zghlxwxcb.cn/news/detail-694918.html
我是一個段落
我是一個段落
.post > p:only-of-type { background: orange;}
:only-child 小明的爸爸只有小明一個孩子
:only-of-type 小明的爸爸有龍鳳胎，小明是唯一的兒子
20、enabled
Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態(tài)，比如輸入框，密碼框，復(fù)選框等。在多個相同表單中（如文本框），若使用類標記會很煩鎖，使用enabled會相當?shù)姆奖?，具體用法如下：
input[type="text"]:enabled //CSS定義文本框樣式
<input type="text" /> 樣式被添加
<input type="text" disabled="disabled" /> 樣式被取消
21、disabled 設(shè)置不要用的輸入框樣式
input[type="text"]:disabled
<input type="text" disabled/>
22、checked 覆蓋單選按鈕和復(fù)選按鈕的選中和未選中的狀態(tài) http://www.imooc.com/code/865
23、::selection “::selection”偽元素是修改用鼠標選擇文本時的文本樣式。瀏覽器默認情況下，用鼠標選擇網(wǎng)頁文本是以“深藍的背景，白色的字體”顯示的
::selection{
background: orange;
color: white;
}
::-moz-selection{
background: orange;
color: white;
} //兼容其他瀏覽器要求
24、read-only 用來指定處于只讀狀態(tài)元素的樣式。
input[type="text"]:-moz-read-only{ border-color: #ccc;} //兼容其他瀏覽器要求
input[type="text"]:read-only border-color: #ccc;}
<input type="text" name="name" id="name" placeholder="大漠" />
<input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />
25、:read-write
:read-write選擇器剛好與:read-only選擇器相反，主要用來指定當元素處于非只讀狀態(tài)時的樣式。
input[type="text"]:-moz-read-only{ border-color: #ccc;} //兼容其他瀏覽器要求
input[type="text"]:read-only{ border-color: #ccc;}
<input type="text" name="name" id="name" placeholder="大漠" />
<input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />
26、::before和::after
p::before{ content:"我愛你; ";}
<p>我也愛你</p>
輸出結(jié)果：我愛你；我也愛你
a::after{ content:attr(title);} //還支持url插入哦
<a href="##" title="我是被插入的內(nèi)容">我是元素</a>
輸出結(jié)果：我是元素我是被插入的內(nèi)容
八、【圖形變換】
1、旋轉(zhuǎn) rotate()
旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)使元素相對原點進行旋轉(zhuǎn)。它主要在二維空間內(nèi)進行操作，設(shè)置一個角度值，用來指定旋轉(zhuǎn)的幅度。正值，元素則相對原點中心順時針旋轉(zhuǎn)；負值，元素則相對原點中心逆時針旋轉(zhuǎn)
transform: rotate(45deg);
2、skew(x,y)
扭曲skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜
transform:skew(10deg，10deg);
3、scale(X,Y)
讓元素根據(jù)中心原點對對象進行縮放,單位是“倍”
scale()的取值默認的值為1，小于1（0.01~0.99）使一個元素縮小；大于1是讓元素放大。
transform: scale(0.9); 縮小
transform: scale(1.2); 放大
4、translate()
可以將元素向指定的方向移動，類似于position中的relative。使用translate()函數(shù)，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
translate(x,y)水平方向和垂直方向同時移動
translateX(x)僅水平方向移動（X軸移動）
translateY(y)僅垂直方向移動（Y軸移動）
transform:translate(50%,50%);
5、matrix(a,b,c,d,e,f)
是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當于直接應(yīng)用一個[a b c d e f]變換矩陣。
a為元素的水平伸縮量，1為原始大?。? b為縱向扭曲，0為不變；
c為橫向扭曲，0不變；
d為垂直伸縮量，1為原始大??；
e為水平偏移量，0是初始位置；
f為垂直偏移量，0是初始位置
6、原點 transform-origin
transform-origin 可以更改起始位置
transform-origin: left top; 起始位置是左上角
注意：同時使用多種方法：transform: translateX(90px) rotate(360deg) 移動和旋轉(zhuǎn)
九、【繪制圖形】
右三角形：
border-style: solid;
border-width: .146667rem 0 .146667rem .173333rem;
border-color: transparent transparent transparent rgba(0,0,0,.67);
position: absolute;
十、【動畫】
第一段：div { width:2px; transition:all .5s ease-in .18s; ｝
or 第一段：div{
transition-property: height; //指定過渡或動態(tài)模擬的CSS屬性
transition-duration:3s; //動畫持續(xù)時間
transition-timing-function: ease-in; //過渡函數(shù)
transition-delay:0.1s;} //指定動畫開始執(zhí)行時間
第二段：div:hover {
height: 300px;
} //這個是最終效果,或換成border-radius: 20px;也可以
ease 速度由快到慢
ease-in 逐漸加速
ease-out 逐漸變慢
ease-in-out 先加速再減速，漸顯漸隱
linear 恒速
transition-property 指定過渡或動態(tài)模擬的CSS屬性
【關(guān)鍵幀動畫】
第一段：@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
第二段：div:hover {
animation: changecolor 5s ease-out .2s;
}
根據(jù)時段用動畫完成不同的任務(wù)
【關(guān)鍵幀動畫--不間斷運動】
第一段：@keyframes around{
0% {
transform: translateY(0);
}
25%{
transform: translateX(180px);
}
50%{
transform: translate(180px, 180px);
}
75%{
transform:translate(0,180px);
}
100%{
transform: translateY(0);
}
}
第二段：div span{{animation-name:around;
animation-duration: 10s;
//過程為10秒
animation-timing-function: ease;
//播放方式
animation-delay: 1s;
//開始播放時間
animation-iteration-count:infinite;
//播放次數(shù)，infinite為無數(shù)次
animation-direction:alternate; } //動畫播放方向
animation-fill-mode: both; forwards 完成后到最后幀 backwards 完成后到初始幀
div:hover span {
animation-play-state:running;//播放狀態(tài)
} // 當鼠標經(jīng)過時自動播放,
or 第二段：：div span{ animation:around 10s ease-in 0.5s infinite; }//注意：這行需另外寫
播放方式：
ease 速度由快到慢
ease-in 逐漸加速
ease-out 逐漸變慢
ease-in-out 先加速再減速，漸顯漸隱
linear 恒速
十一、【Columns 多列布局】
columns: 200px 2; //顯示2欄，每欄寬度為200px
column-gap:6px; //列間距為6px
column-rule: 3px solid green; //列間豎條/邊框為3px綠色
column-span:all;; //當文件每段都有個P時可以根據(jù)需要跨列設(shè)置是否需要分列
十二、【box-sizing 盒子模型】
按W3C的盒子模型計算，padding后會把元素撐出來，想要解決問題只需加box-sizing:border-box后，padding不會被影響
十三、【Flex 伸縮布局】
1、采用Flex布局的元素，它的所有子元素自動成為容器成員，稱為Flex項目（flex item）
2、容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）
3、主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end；
4、交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
5、以下6個屬性設(shè)置在容器上。
■ flex-direction 屬性決定主軸的方向（即項目的排列方向）
:row 主軸為水平方向，起點在左端
:row-reverse 主軸為水平方向，起點在右端
:column 主軸為垂直方向，起點在上沿
:column-reverse 主軸為垂直方向，起點在下沿。
■ flex-wrap nowrap不換行 wrap換行，第一行在上方 wrap-reverse換行，第一行在下方
■ flex-flow 是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
■ justify-content 定義了項目在主軸上的對齊方式
:flex-start（默認值） 左對齊
:flex-end 右對齊
:center 居中
:space-between 兩端對齊，項目之間的間隔都相等。
:space-around 每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
■ align-items 定義項目在交叉軸上如何對齊
:flex-start 交叉軸的起點對齊。
:flex-end 交叉軸的終點對齊。
:center 交叉軸的中點對齊。
:baseline 項目的第一行文字的基線對齊。
:stretch（默認值） 如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
■ align-content 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
:flex-start 與交叉軸的起點對齊。
:flex-end 與交叉軸的終點對齊。
:center 與交叉軸的中點對齊。
:space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布。
:space-around 每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
:stretch（默認值） 軸線占滿整個交叉軸。
6、項目的屬性
■ order 定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0
■ flex-grow 定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大
■ flex-shrink 屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小
■ flex-basis 定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
■ flex 是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto，個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
■ align-self 允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性，該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
十四、【Media Queries 媒體控制】
1. 最大寬度max-width
@media screen and (max-width:480px){
.ads {
display:none;
}
}
上面表示的是：當屏幕小于或等于480px時,頁面中的廣告區(qū)塊（.ads）都將被隱藏。
2.最小寬度min-width
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
上面表示的是：當屏幕大于或等于900px時，容器“.wrapper”的寬度為980px。
3、最小和最大區(qū)間
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
當屏幕在600px~900px之間時，body的背景色渲染為“#f5f5f5”
4、設(shè)備屏幕的輸出寬度Device Width
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
在智能設(shè)備上，例如iPhone、iPad等，還可以根據(jù)屏幕設(shè)備的尺寸來設(shè)置相應(yīng)的樣式（或者調(diào)用相應(yīng)的樣式文件）。
5、not關(guān)鍵詞
@media not print and (max-width: 1200px){樣式代碼}
面代碼表示的是：樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中。
6.only關(guān)鍵詞
<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上，或者被用于屏幕寬度大于或等于960px的設(shè)備上。
十五、【Responsive 不同設(shè)備的分辨率設(shè)置相應(yīng)樣式】
1.1024px顯屏
@media screen and (max-width : 1024px) { /* 樣式寫在這里 */ }
2.800px顯屏
@media screen and (max-width : 800px) { /* 樣式寫在這里 */ }
3.640px顯屏
@media screen and (max-width : 640px) { /* 樣式寫在這*/ }
4.iPad橫板顯屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 樣式寫在這 */ }
5.iPad豎板顯屏
@media screen and (max-device-width: 768px) and (orientation: portrait) { /* 樣式寫在這 */ }
6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 樣式寫在這 */ }
十六、【resize 自由綻放】
textarea { resize: both;}
none 不能綻放 both 可改變寬高度 horizontal 僅可改變寬度
vertical 僅可以改變高度 inherit 繼承父元素resize屬性值
想要在div用上這效果必須加一個overflow:hidden
十七、【outline 外輪廓邊框】
1、與border相似，但outline邊線不會占用空間
2、outline 的效果將隨元素的 focus 而自動出現(xiàn)，相應(yīng)的由 blur 而自動消失。這些都是瀏覽器的默認行為，無需JavaScript配合CSS來控制。
3、outline-offset: 2px; 設(shè)置邊框與元素邊緣的距離
3D菜單：http://www.imooc.com/code/1963
十八、box-sizing: border-box 用法
當加入padding時，邊框的寬高就會發(fā)生變化，如果想加入padding后，又不想寬高發(fā)生變化，就用box-sizing: border-box
【一些實例】
1、平行四邊型
width: 200px;
height: 200px;
background: blue;
transform: skewX(-20deg);
2、梯形
width:50px;
height:50px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid transparent;
border-bottom:50px solid blue;
3、直角三角形（上三角型，將四條邊都填充100px就知道怎么弄了）
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid blue;
到了這里，關(guān)于CSS3 知識點的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
