-
CSS3中的變形--位移 translate()
translate()函數(shù)可以將元素向指定的方向移動(dòng)，類似于position中的relative?；蛞院?jiǎn)單的理解為，使用translate()函數(shù)，可以把元素從原來的位置移動(dòng)，而不影響在X、Y軸上的任何Web組件。
translate我們分為三種情況：
1、translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）
2、translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）
3、translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）
實(shí)例演示：通過translate()函數(shù)將元素向Y軸下方移動(dòng)50px,X軸右方移動(dòng)100px。
CSS3中的變形--矩陣 matrix()
matrix()?是一個(gè)含六個(gè)值的(a,b,c,d,e,f)變換矩陣，用來指定一個(gè)2D變換，相當(dāng)于直接應(yīng)用一個(gè)[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學(xué)中的矩陣，我在這里只是簡(jiǎn)單的說一下CSS3中的transform有這么一個(gè)屬性值，如果需要深入了解，需要對(duì)數(shù)學(xué)矩陣有一定的知識(shí)。
示例演示：通過matrix()函數(shù)來模擬transform中translate()位移的效果。
HTML代碼：<div class="wrapper"> ? <div></div> </div>
CSS代碼：
.wrapper { ? width: 300px; ? height: 200px; ? border: 2px dotted red; ? margin: 40px auto; } .wrapper div { ? width:300px; ? height: 200px; ? background: orange; ??-webkit-transform: matrix(1,0,0,1,50,50); ? -moz-transform:matrix(1,0,0,1,50,50); ? transform: matrix(1,0,0,1,50,50); }
演示結(jié)果：
查看全部 -
CSS3變形--旋轉(zhuǎn) rotate()
旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)使元素相對(duì)原點(diǎn)進(jìn)行旋轉(zhuǎn)。它主要在二維空間內(nèi)進(jìn)行操作，設(shè)置一個(gè)角度值，用來指定旋轉(zhuǎn)的幅度。如果這個(gè)值為正值，元素相對(duì)原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果這個(gè)值為負(fù)值，元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。
扭曲skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個(gè)對(duì)象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會(huì)改變?cè)氐男螤?。skew()函數(shù)不會(huì)旋轉(zhuǎn)，而只會(huì)改變?cè)氐男螤睢?/p>
Skew()具有三種情況：
1、skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；
第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則值為0，也就是Y軸方向上無斜切。
2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）
CSS3中的變形--縮放 scale()
縮放 scale()函數(shù)?讓元素根據(jù)中心原點(diǎn)對(duì)對(duì)象進(jìn)行縮放。
縮放 scale 具有三種情況：
1、?scale(X,Y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）
例如：
div:hover { ? -webkit-transform: scale(1.5,0.5); ? -moz-transform:scale(1.5,0.5) ? transform: scale(1.5,0.5); }
注意：Y是一個(gè)可選參數(shù)，如果沒有設(shè)置Y值，則表示X，Y兩個(gè)方向的縮放倍數(shù)是一樣的。
2、scaleX(x)元素僅水平方向縮放（X軸縮放）
3、scaleY(y)元素僅垂直方向縮放（Y軸縮放）
TML代碼：
<div class="wrapper">
?<div>我將放大1.5倍</div>
</div>CSS代碼：
.wrapper {
?width: 200px;
?height: 200px;
?border:2px dashed red;
?margin: 100px auto;
}
.wrapper div {
?width: 200px;
?height: 200px;
?line-height: 200px;
?background: orange;
?text-align: center;
?color: #fff;
}
.wrapper div:hover {
?opacity: .5; ?-webkit-transform: scale(1.5);
? -moz-transform:scale(1.5)
?transform: scale(1.5);}演示結(jié)果
注意：?scale()的取值默認(rèn)的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個(gè)元素縮小；而任何大于或等于1.01的值，作用是讓元素放大。
查看全部 -
:before和::after這兩個(gè)主要用來給元素的前面或后面插入內(nèi)容，這兩個(gè)常和"content"配合使用，使用的場(chǎng)景最多的就是清除浮動(dòng)。
.clearfix::before,
.clearfix::after {
? ?content: ".";
? ?display: block;
? ?height: 0;
? ?visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
當(dāng)然可以利用他們制作出其他更好的效果，比如右側(cè)中的陰影效果，也是通過這個(gè)來實(shí)現(xiàn)的。關(guān)鍵代碼分析：
.effect::before, .effect::after{
??? content:"";?? ?position:absolute;
?? ?z-index:-1;
?? ?-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
?? ?-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
?? ?box-shadow:0 0 20px rgba(0,0,0,0.8);
?? ?top:50%;
?? ?bottom:0;
?? ?left:10px;
?? ?right:10px;
?? ?-moz-border-radius:100px / 10px;
?? ?border-radius:100px / 10px;
}上面代碼作用在class名叫.effect上的div的前（before）后(after)都添加一個(gè)空元素，然后為這兩個(gè)空元素添加陰影特效。
查看全部 -
CSS3動(dòng)畫（注意：Chrome或Safari瀏覽器，需要加入-webkit-前綴?。?/em>
關(guān)鍵幀
使用@keyframes命令定義關(guān)鍵幀，具體格式為：
@keyframes name{
selsector{css-styles;}}
name表示動(dòng)畫名稱；
selector表示關(guān)鍵幀的時(shí)間位置，也就是動(dòng)畫時(shí)長(zhǎng)的百分比，也可以使用參數(shù)from（等價(jià)于0%）to（等價(jià)于100%）表示動(dòng)畫的
開始和結(jié)束；
css-styles表示對(duì)應(yīng)關(guān)鍵幀的樣式屬性，可以設(shè)置多個(gè)屬性;
動(dòng)畫效果相關(guān)屬性
1.animation-name:name|none;動(dòng)畫名稱
設(shè)置要應(yīng)用的動(dòng)畫名稱
2.animation-duration:time;動(dòng)畫時(shí)間
設(shè)置動(dòng)畫效果播放一次的時(shí)長(zhǎng)
3.animation-timing-function設(shè)置動(dòng)畫的速度曲線
屬性值cubiczier(n,n,n,n)|liner|ease|ease-in|ease-out
4.animation-delay:time;設(shè)置延遲時(shí)間
5.animation-iteration-count:number|infinite設(shè)置動(dòng)畫播放次數(shù)
其中，number表示動(dòng)畫播放次數(shù)，屬性值為正整數(shù)，默認(rèn)值為1；infinite表示循環(huán)播放
6.animation-direction屬性用來設(shè)置動(dòng)畫播放方向
屬性值：normal是默認(rèn)值，表示動(dòng)畫的每次循環(huán)都是向前播放
alternate表示動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放
7.animation-play-state屬性設(shè)置元素動(dòng)畫的播放狀態(tài)
值：running是默認(rèn)值，將暫停的動(dòng)畫重新播放
paused表示將播放的動(dòng)畫停下來
例：
span{
animation-name:move;
animation-play-state:paused;
}
span:hover{
animation-pay-state:running;
}
此屬性值可以配合:hover等偽類選擇器使用，鼠標(biāo)指針離開該元素時(shí)動(dòng)畫暫停播放，反之動(dòng)畫繼續(xù)播放
8.animation-fill-mode屬性定義在動(dòng)畫開始之前和結(jié)束之后發(fā)生的操作。
屬性值：none，forwards，backwards，both。
none默認(rèn)值，表示動(dòng)畫將按預(yù)期進(jìn)行和結(jié)束，在動(dòng)畫完成其最后一幀時(shí)，動(dòng)畫會(huì)反轉(zhuǎn)到初始幀處。
forwards表示動(dòng)畫在結(jié)束后繼續(xù)應(yīng)用最后的關(guān)鍵幀的位置
backwards會(huì)在向元素應(yīng)用動(dòng)畫樣式時(shí)迅速應(yīng)用動(dòng)畫的初始幀
both元素動(dòng)畫同時(shí)具有forwards和backwards效果
查看全部 -
CSS3中的動(dòng)畫——過渡屬性
早期在Web中要實(shí)現(xiàn)動(dòng)畫效果，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了一個(gè)新的模塊transition，它可以通過
一些簡(jiǎn)單的CSS事件來觸發(fā)元素的外觀變化，讓效果顯得更加細(xì)膩。簡(jiǎn)單點(diǎn)說，就是通過鼠標(biāo)的單擊、獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝?/strong>
何改變中觸發(fā)，并平滑地以動(dòng)畫效果改變CSS的屬性值
transition是一個(gè)復(fù)合屬性，主要包括以下幾個(gè)子屬性：
1.transition-property:指定過渡或動(dòng)態(tài)模擬的CSS屬性[none|all|property]
none是默認(rèn)值，表示不應(yīng)用過渡效果；all表示為所有屬性應(yīng)用過渡效果；property表示應(yīng)用過渡效果的屬性名稱，可以設(shè)置多個(gè)。
2.transition-duration:指定完成過渡所需的時(shí)間
3.transition-timing-function:指定過渡的速度曲線【cubiczier(n,n,n,n)|liner|ease|ease-in|ease-out】
cubiczier(n,n,n,n)貝塞爾曲線，用于精確設(shè)置過渡效果的速度曲線，n的取值為0~1；
linear勻速顯示過渡效果，等同于cubiczier(0,0,1,1);
ease默認(rèn)值，（相對(duì)于勻速）慢速開始、先加速再減速至結(jié)束的過渡效果，等同于cubiczier(0.25,0.1,0.25,0.1)
ease-in（相對(duì)于勻速）慢速開始再逐漸加速的過渡效果，等同于cubiczier(0.42,0,1,1)
ease-out（相對(duì)于勻速）快速開始慢速結(jié)束的過渡效果，等同于cubiczier(0,0,0.58,1)
ease-in-out（相對(duì)于勻速）慢速開始慢速結(jié)束的過渡效果，等同于cubiczier(0.42,0,0.58,1)
4.transition-delay:指定開始出現(xiàn)的延遲時(shí)間
查看全部 -
CSS3選擇器 ::selection選擇器
“::selection”偽元素是用來匹配突出顯示的文本(用鼠標(biāo)選擇文本時(shí)的文本)。瀏覽器默認(rèn)情況下，用鼠標(biāo)選擇網(wǎng)頁文本是以“深藍(lán)的背景，白色的字體”顯示的，效果如下圖所示：
從上圖中可以看出，用鼠標(biāo)選中“專注IT、互聯(lián)網(wǎng)技術(shù)”、“純干貨、學(xué)以致用”、“沒錯(cuò)、這是免費(fèi)的”這三行文本中，默認(rèn)顯示樣式為：藍(lán)色背景、白色文本。
有的時(shí)候設(shè)計(jì)要求,不使用上圖那種瀏覽器默認(rèn)的突出文本效果，需要一個(gè)與眾不同的效果，此時(shí)“::selection”偽元素就非常的實(shí)用。不過在Firefox瀏覽器還需要添加前綴。
查看全部 -
CSS3選擇器 :enabled選擇器
在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態(tài)，比如輸入框，密碼框，復(fù)選框等。在默認(rèn)情況之下，這些表單元素都處在可用狀態(tài)。那么我們可以通過偽選擇器“:enabled”對(duì)這些表單元素設(shè)置樣式。
示例演示
通過“:enabled”選擇器，修改文本輸入框的邊框?yàn)?像素的紅色邊框，并設(shè)置它的背景為灰色。
CSS3選擇器 :disabled選擇器
“:disabled”選擇器剛好與“:enabled”選擇器相反，用來選擇不可用表單元素。要正常使用“:disabled”選擇器，需要在表單元素的HTML中設(shè)置“disabled”屬性。
示例演示
通過“:disabled”選擇器，給不可用輸入框設(shè)置明顯的樣式。
CSS3選擇器 :checked選擇器
在表單元素中，單選按鈕和復(fù)選按鈕都具有選中和未選中狀態(tài)。（大家都知道，要覆寫這兩個(gè)按鈕默認(rèn)樣式比較困難）。在CSS3中，我們可以通過狀態(tài)選擇器“:checked”配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式。而“:checked”表示的是選中狀態(tài)。
示例演示：
通過“:checked”狀態(tài)來自定義復(fù)選框效果。
查看全部 -
CSS3 first-of-type選擇器
“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個(gè)父元素下的某個(gè)類型的第一個(gè)子元素。
示例演示：
通過“:first-of-type”選擇器，定位div容器中的第一個(gè)p元素（p不一定是容器中的第一個(gè)子元素），并設(shè)置其背景色為橙色
CSS3 結(jié)構(gòu)性偽類選擇器—first-child
“:first-child”選擇器表示的是選擇父元素的第一個(gè)子元素的元素E。簡(jiǎn)單點(diǎn)理解就是選擇元素中的第一個(gè)子元素，記住是子元素，而不是后代元素。
示例演示
通過“:first-child”選擇器定位列表中的第一個(gè)列表項(xiàng)，并將序列號(hào)顏色變?yōu)榧t色
“:only-of-type”選擇器用來選擇一個(gè)元素是它的父元素的唯一一個(gè)相同類型的子元素。這樣說或許不太好理解，換一種說法。“:only-of-type”是表示一個(gè)元素他有很多個(gè)子元素，而其中只有一種類型的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個(gè)元素中的唯一一個(gè)類型子元素。
示例演示
通過“:only-of-type”選擇器來修改容器中僅有一個(gè)div元素的背景色為橙色。
查看全部 -
:nth-child(n)”選擇器用來定位某個(gè)父元素的一個(gè)或多個(gè)特定的子元素。其中“n”是其參數(shù)，而且可以是整數(shù)值(1,2,3,4)，也可以是表達(dá)式(2n+1、-n+5)和關(guān)鍵詞(odd、even)，但參數(shù)n的起始值始終是1，而不是0。也就是說，參數(shù)n的值為0時(shí)，選擇器將選擇不到任何匹配的元素。
經(jīng)驗(yàn)與技巧:當(dāng)“:nth-child(n)”選擇器中的n為一個(gè)表達(dá)式時(shí)，其中n是從0開始計(jì)算，當(dāng)表達(dá)式的值為0或小于0的時(shí)候，不選擇任何匹配的元素。如下表所示：
CSS3 nth-of-type(n)選擇器
“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計(jì)算父元素中指定的某種類型的子元素。當(dāng)某個(gè)元素中的子元素不單單是同一種類型的子元素時(shí)，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數(shù)也一樣，可以是具體的整數(shù)，也可以是表達(dá)式，還可以是關(guān)鍵詞。
示例演示
通過“:nth-of-type(2n)”選擇器，將容器“div.wrapper”中偶數(shù)段數(shù)的背景設(shè)置為橙色。
CSS3 nth-last-of-type(n)選擇器
“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最后一個(gè)子元素開始，而且它的使用方法類似于上節(jié)中介紹的“:nth-last-child(n)”選擇器一樣。
示例演示
通過“:nth-last-of-type(n)”選擇器將容器“div.wrapper”中的倒數(shù)第三個(gè)段落背景設(shè)置為橙色。
CSS3 last-of-type選擇器
“:last-of-type”選擇器和“:first-of-type”選擇器功能是一樣的，不同的是他選擇是父元素下的某個(gè)類型的最后一個(gè)子元素。
示例演示
通過“:last-of-type”選擇器，將容器“div.wrapper”中最后一個(gè)段落元素背景設(shè)置為橙色
（提示：這個(gè)段落不是“div.wrapper”容器的最后一個(gè)子元素）。
查看全部 -
SS3 結(jié)構(gòu)性偽類選擇器—empty
:empty選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點(diǎn)內(nèi)容都沒有，哪怕是一個(gè)空格。
示例顯示：
比如說，你的文檔中有三個(gè)段落p元素，你想把沒有任何內(nèi)容的P元素隱藏起來。我們就可以使用“:empty”選擇器來控制。
HTML代碼：
<p>我是一個(gè)段落</p> <p> </p> <p></p>
CSS代碼：
p{ ?background: orange; ?min-height: 30px; } p:empty { ? display: none; }
演示結(jié)果：
CSS3 結(jié)構(gòu)性偽類選擇器—last-child
“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后一個(gè)子元素。例如，需要改變的是列表中的最后一個(gè)“l(fā)i”的背景色，就可以使用這個(gè)選擇器，
ul>li:last-child{background:blue;}
CSS3 結(jié)構(gòu)性偽類選擇器—nth-last-child(n)
“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個(gè)“l(fā)ast”，所起的作用和“:nth-child(n)”選擇器有所區(qū)別，從某父元素的最后一個(gè)子元素開始計(jì)算，來選擇特定的元素。
查看全部 -
CSS3 結(jié)構(gòu)性偽類選擇器—root
:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。
示例演示：
通過“:root”選擇器設(shè)置背景顏色
HTML代碼：
<div>:root選擇器的演示</div>
CSS代碼：
:root { ? background:orange; }
“:root”選擇器等同于<html>元素，簡(jiǎn)單點(diǎn)說：
:root{background:orange}
html {background:orange;}
得到的效果等同。
建議使用:root方法。
另外在IE９以下還可以借助“:root”實(shí)現(xiàn)hack功能。
CSS3 結(jié)構(gòu)性偽類選擇器—first-child
“:first-child”選擇器表示的是選擇父元素的第一個(gè)子元素的元素E。簡(jiǎn)單點(diǎn)理解就是選擇元素中的第一個(gè)子元素，記住是子元素，而不是后代元素。
示例演示
通過“:first-child”選擇器定位列表中的第一個(gè)列表項(xiàng)，并將序列號(hào)顏色變?yōu)榧t色。
查看全部 -
CSS3背景 multiple backgrounds
多重背景，也就是CSS2里background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時(shí)為用逗號(hào)隔開的每組值；用分解寫法時(shí)，如果有多個(gè)背景圖片，而其他屬性只有一個(gè)（例如background-repeat只有一個(gè)），表明所有背景圖片應(yīng)用該屬性值。
語法縮寫如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
可以把上面的縮寫拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;注意：
用逗號(hào)隔開每組 background 的縮寫值；
如果有 size 值，需要緊跟 position 并且用 "/" 隔開；
如果有多個(gè)背景圖片，而其他屬性只有一個(gè)（例如 background-repeat 只有一個(gè)），表明所有背景圖片應(yīng)用該屬性值。
background-color?只能設(shè)置一個(gè)。
舉例：
查看全部 -
CSS3背景 background-size
設(shè)置背景圖片的大小，以長(zhǎng)度值或百分比顯示，還可以通過cover和contain來對(duì)圖片進(jìn)行伸縮。
語法：
background-size: auto | <長(zhǎng)度值> | <百分比> | cover | contain
取值說明：
1、auto：默認(rèn)值，不改變背景圖片的原始高度和寬度；
2、<長(zhǎng)度值>：成對(duì)出現(xiàn)如200px 50px，將背景圖片寬高依次設(shè)置為前面兩個(gè)值，當(dāng)設(shè)置一個(gè)值時(shí)，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設(shè)置為所在元素寬高乘以前面百分比得出的數(shù)值，當(dāng)設(shè)置一個(gè)值時(shí)同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個(gè)容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
提示：大家可以在右邊的編輯窗口輸入自己的代碼嘗試不同取值的效果。
CSS生成內(nèi)容
在Web中插入內(nèi)容，在CSS2.1時(shí)代依靠的是JavaScript來實(shí)現(xiàn)。但進(jìn)入CSS3進(jìn)代之后我們可以通過CSS3的偽類“:before”，“:after”和CSS3的偽元素“::before”、“::after”來實(shí)現(xiàn)，其關(guān)鍵是依靠CSS3中的“content”屬性來實(shí)現(xiàn)。不過這個(gè)屬性對(duì)于img和input元素不起作用。
content配合CSS的偽類或者偽元素，一般可以做以下四件事情：
功能
? ?
功能說明
? ?
none
? ?
不生成任何內(nèi)容
? ?
attr
? ?
插入標(biāo)簽屬性值
? ?
url
? ?
使用指定的絕對(duì)或相對(duì)地址插入一個(gè)外部資源（圖像，聲頻，視頻或?yàn)g覽器支持的其他任何資源）
? ?
string
? ?
插入字符串
? ?
查看全部 -
CSS3背景 background-clip
用來將背景圖片做適當(dāng)?shù)牟眉粢赃m應(yīng)實(shí)際需要。
語法：
background-clip ： border-box | padding-box | content-box | no-clip;
參數(shù)分別表示從邊框、或內(nèi)填充，或者內(nèi)容區(qū)域向外裁剪背景。no-clip表示不裁切，和參數(shù)border-box顯示同樣的效果。backgroud-clip默認(rèn)值為border-box。
CSS3外輪廓屬性
外輪廓outline在頁面中呈現(xiàn)的效果和邊框border呈現(xiàn)的效果極其相似，但和元素邊框border完全不同，外輪廓線不占用網(wǎng)頁布局空間，不一定是矩形，外輪廓是屬于一種動(dòng)態(tài)樣式，只有元素獲取到焦點(diǎn)或者被激活時(shí)呈現(xiàn)。
outline屬性早在CSS2中就出現(xiàn)了，主要是用來在元素周圍繪制一條輪廓線，可以起到突出元素的作用。但是并未得到各主流瀏覽器的廣泛支持，在CSS3中對(duì)outline作了一定的擴(kuò)展，在以前的基礎(chǔ)上增加新特性。outline屬性的基本語法如下：
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
從語法中可以看出outline和border邊框?qū)傩缘氖褂梅椒O其類似。outline-color相當(dāng)于border-color、outline-style相當(dāng)于border-style，而outline-width相當(dāng)于border-width，只不過CSS3給outline屬性增加了一個(gè)outline-offset屬性，其取值說明如下。
?
屬性值
? ?
屬性值說明
? ?
outline-color
? ?
定義輪廓線的顏色，屬性值為CSS中定義的顏色值。在實(shí)際應(yīng)用中，可以將此參數(shù)省略，省略時(shí)此參數(shù)的默認(rèn)值為黑色。
? ?
outline-style
? ?
定義輪廓線的樣式，屬性為CSS中定義線的樣式。在實(shí)際應(yīng)用中，可以將此參數(shù)省略，省略時(shí)此參數(shù)的默認(rèn)值為none，省略后不對(duì)該輪廓線進(jìn)行任何繪制。
? ?
outline-width
? ?
定義輪廓線的寬度，屬性值可以為一個(gè)寬度值。在實(shí)際應(yīng)用中，可以將此參數(shù)省略，省略時(shí)此參數(shù)的默認(rèn)值為medium，表示繪制中等寬度的輪廓線。
? ?
outline-offset
? ?
定義輪廓邊框的偏移位置的數(shù)值，此值可以取負(fù)數(shù)值。當(dāng)此參數(shù)的值為正數(shù)值，表示輪廓邊框向外偏離多少個(gè)像素；當(dāng)此參數(shù)的值為負(fù)數(shù)值，表示輪廓邊框向內(nèi)偏移多少個(gè)像素。
? ?
inherit
? ?
元素繼承父元素的outline效果。
? ?
查看全部 -
設(shè)置元素背景圖片的原始起始位置。
語法：
background-origin:border-box|padding-box|content-box;
參數(shù)分別表示背景圖片是從邊框，還是內(nèi)邊距（默認(rèn)值），或者是內(nèi)容區(qū)域開始顯示。
需要注意的是，如果背景不是no-repeat，這個(gè)屬性無效，它會(huì)從邊框開始顯示。
任務(wù)
查看全部
舉報(bào)