CSS3教程（未完）……

3/20/2017 2:17:41 PM

CSS3邊框

border-radius
定義圓角的形狀褐筛。上右下左原則樊展。

border-image
使用圖片創(chuàng)建邊框腾窝。

box-shadow
向方框添加陰影岂却。
語(yǔ)法：box-shadow: h-shadow（必需水平陰影） v-shadow（必需垂直陰影） blur（模糊距離） spread（陰影尺寸） color（陰影顏色） inset（將外部陰影改為內(nèi)部陰影）;
說(shuō)明：可實(shí)現(xiàn)類似照片疊加拼圖的效果。

CSS3背景

background-size
可以以像素或百分比規(guī)定尺寸弦追。如果以百分比規(guī)定尺寸岳链，那么尺寸相對(duì)于父元素的寬度和高度。

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(/i/bg_flower.gif) red;
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>

<body>
<p>上面是縮小的背景圖片劲件。</p>

<p>原始圖片：![](/i/bg_flower.gif)</p>

</body>
</html>

上面代碼效果如下：

圖片說(shuō)明文字

其中body{padding-top:80px;}指的是body元素相對(duì)于自身掸哑，有一個(gè)80px的上內(nèi)邊距，即第一行文本元素距離頁(yè)面頂部有一個(gè)80px的距離零远，這個(gè)值與背景圖片無(wú)關(guān)苗分。

將padding-top值設(shè)置為40px，結(jié)果如下：

圖片說(shuō)明文字

background-origin
規(guī)定背景圖片的定位區(qū)域牵辣。背景圖片可以放置于 content-box摔癣、padding-box 或 border-box 區(qū)域。

圖片說(shuō)明文字

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background: url('C:/Users/dolby/Pictures/yh2.jpg') 100px 300px no-repeat,url('C:/Users/dolby/Pictures/yh1.jpg') 110px 400px no-repeat;
}
div
{
border:20px solid black;
padding:20px;
background:url('C:/Users/dolby/Pictures/zl.jpg') no-repeat yellow;
background-size: 80px 60px;
color: red;
}
#div1
{
background-origin:border-box;
background-position:left;
}
#div2
{
background-origin:padding-box;
background-position:right;
}
#div3
{
background-origin:content-box;
background-position:top right;
}
</style>
</head>
<body>

<p>background-origin:border-box:</p>
<div id="div1">
這是文本纬向。這是文本择浊。這是文本。這是文本罢猪。這是文本近她。這是文本。這是文本膳帕。這是文本粘捎。這是文本。這是文本危彩。這是文本攒磨。這是文本。這是文本汤徽。這是文本娩缰。這是文本。這是文本谒府。這是文本拼坎。這是文本。這是文本完疫。這是文本泰鸡。這是文本。這是文本壳鹤。這是文本盛龄。這是文本。這是文本。這是文本余舶。這是文本啊鸭。這是文本。這是文本匿值。這是文本赠制。這是文本。這是文本千扔。
</div>

<p>background-origin:content-box:</p>
<div id="div2">
這是文本憎妙。這是文本。這是文本曲楚。這是文本厘唾。這是文本。這是文本龙誊。這是文本抚垃。這是文本。這是文本趟大。這是文本鹤树。這是文本。這是文本逊朽。這是文本罕伯。這是文本。這是文本叽讳。這是文本追他。這是文本。這是文本岛蚤。這是文本邑狸。這是文本。這是文本涤妒。這是文本单雾。這是文本。這是文本她紫。這是文本硅堆。這是文本。這是文本贿讹。這是文本渐逃。這是文本。這是文本围详。這是文本朴乖。這是文本。
</div>

<p>background-origin:padding-box:</p>
<div id="div3">
這是文本助赞。這是文本买羞。這是文本。這是文本雹食。這是文本畜普。這是文本。這是文本群叶。這是文本吃挑。這是文本。這是文本街立。這是文本舶衬。這是文本。這是文本赎离。這是文本逛犹。這是文本。這是文本梁剔。這是文本虽画。這是文本。這是文本荣病。這是文本码撰。這是文本。這是文本个盆。這是文本脖岛。這是文本。這是文本砾省。這是文本鸡岗。這是文本。這是文本编兄。這是文本轩性。這是文本。這是文本狠鸳。這是文本揣苏。
</div>
</body>
</html>

圖片說(shuō)明文字

background-clip
規(guī)定背景的繪制區(qū)域。
和background-origin一樣件舵，值也為"border-box(默認(rèn))/content-box/padding-box"

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
padding:10px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>

<div>
這是文本卸察。這是文本。這是文本铅祸。
</div>

</body>
</html>

圖片說(shuō)明文字

若沒(méi)有規(guī)定background-clip:content-box;則黃色背景會(huì)從邊框開始填滿坑质。

CSS3文本效果

text-shadow
給文本添加陰影合武。
語(yǔ)法：text-shadow: h-shadow（必需水平陰影） v-shadow（必需垂直陰影） blur（模糊距離） color（陰影顏色）;

word-wrap
允許文本在元素內(nèi)強(qiáng)制換行。（即解決前面經(jīng)常遇到的問(wèn)題：寫一行很長(zhǎng)的sssssssss但不加空格涡扼，就會(huì)認(rèn)為這是一整個(gè)單詞而不進(jìn)行拆分稼跳，表現(xiàn)出來(lái)的效果有問(wèn)題）

<!DOCTYPE html>
<html>
<head>
<style> 
p.test
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>

<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

圖片說(shuō)明文字

去掉word-wrap:break-word;表現(xiàn)如下：

圖片說(shuō)明文字

CSS3字體

通過(guò)@font-face規(guī)則定義任意喜歡的字體。

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
    ,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}

@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Bold.ttf')
    ,url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

div
{
font-family:myFirstFont;
}
</style>
</head>
<body>

<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>

<p><b>注釋：</b>Internet Explorer 9+ 支持新的 @font-face 規(guī)則吃沪。Internet Explorer 8 以及更早的版本不支持新的 @font-face 規(guī)則汤善。</p>

</body>
</html>

圖片說(shuō)明文字

如上，在新的@font-face規(guī)則中票彪，必須首先定義字體的名稱（比如 myFirstFont）红淡，然后指向該字體文件，通過(guò)font-family屬性來(lái)引用字體的名稱(myFirstFont)降铸。
而當(dāng)font-family的文本需要顯示為粗體在旱，也就是當(dāng)使用了b標(biāo)簽時(shí)，需要另外添加一個(gè)包含該字體粗體的字體文件推掸，為相同的字體設(shè)置許多@font-face規(guī)則來(lái)達(dá)到我們的目的颈渊。
當(dāng)去掉上述代碼中的第二段@font-face后，顯示效果如下：

圖片說(shuō)明文字

語(yǔ)法規(guī)則示例：

<style>
@font-face
{
font-family:myFirstFont; 
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>

CSS 2D轉(zhuǎn)換

屬性：transform
值：

translate()定義偏移量left和top

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:red;
}
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}
div#div3
{
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%); /* IE 9 */
-moz-transform:translate(-50%,-50%); /* Firefox */
-webkit-transform:translate(-50%,-50%); /* Safari and Chrome */
-o-transform:translate(-50%,-50%); /* Opera */
}
</style>
</head>
<body>
<div>你好终佛。這是一個(gè) div 元素俊嗽。</div>
<div id="div2">你好。這是一個(gè) div 元素铃彰。</div>
<div id="div3">你好绍豁。這是一個(gè) div 元素。</div>
</body>
</html>

效果如下：

圖片說(shuō)明文字

元素會(huì)以自身中心點(diǎn)為原點(diǎn)（即原本所在的位置的中心點(diǎn)）偏移一定的長(zhǎng)度牙捉，transform:translate(50px,100px);表示在中心點(diǎn)左邊添加50px竹揍，在中心點(diǎn)上方添加100px。
也可用比例來(lái)表示邪铲，transform:translate(-50%,-50%);表示以中心點(diǎn)為原點(diǎn)芬位，向X軸左邊添加自身寬度的-50%，向Y軸上方添加自身高度的-50%带到。

rotate()定義旋轉(zhuǎn)角度

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

元素會(huì)以自身中心點(diǎn)為原點(diǎn)旋轉(zhuǎn)一定角度昧碉，角度值為正即順時(shí)針旋轉(zhuǎn)，負(fù)值為逆時(shí)針揽惹。

scale()定義元素尺寸在X軸和Y軸上的成比例縮放被饿。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}
</style>
</head>
<body>
<div>你好。這是一個(gè) div 元素搪搏。</div>
<div id="div2">你好狭握。這是一個(gè) div 元素。</div>
</body>
</html>

如果沒(méi)有設(shè)定div#div2疯溺，那么兩個(gè)div元素應(yīng)該是上下緊湊排列的论颅，但上面代碼的效果是：

圖片說(shuō)明文字

div2相對(duì)于它原本應(yīng)該在的地方哎垦，添加了100px的margin，即位置移到了第一個(gè)div的右下角并不與之相交恃疯，然后以自身中心點(diǎn)為原點(diǎn)撼泛，寬度變?yōu)樵瓉?lái)的2倍，高度變?yōu)樵瓉?lái)的4倍澡谭。

skew()定義水平X及垂直Y翻轉(zhuǎn)拉伸。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}
</style>
</head>
<body>
<div>你好损俭。這是一個(gè) div 元素蛙奖。</div>
<div id="div2">你好。這是一個(gè) div 元素杆兵。</div>
</body>
</html>

值skew(30deg,20deg)圍繞X軸把元素翻轉(zhuǎn)30度雁仲，圍繞Y 軸翻轉(zhuǎn)20度。

matrix()將所有的2D轉(zhuǎn)換方法組合琐脏，需要6個(gè)參數(shù)攒砖，矩陣為3*3，包括函數(shù)日裙，允許旋轉(zhuǎn)吹艇、縮放、移動(dòng)及傾斜元素昂拂，注意：translate, rotate等方法都是需要單位的受神，而matrix方法e,f參數(shù)的單位可以省略。

transform:matrix詳細(xì)介紹
以下線性代數(shù)知識(shí)：

線性代數(shù)

設(shè)原始基點(diǎn)H坐標(biāo)為(x,y)格侯，transform:matrix(a,b,c,d,e,f)

用于偏移translate時(shí)鼻听，變換后基點(diǎn)H'(x'=ax+cy+e,y'=bx+dy+f)，在不設(shè)置transform-origin屬性時(shí)默認(rèn)矩陣基點(diǎn)為(0,0),這時(shí)候得到的變換后基點(diǎn)坐標(biāo)為H'(e,f)联四；
用于縮放scale時(shí)撑碴，參數(shù)a和d分別表示X軸和Y軸縮放比例，那么對(duì)于matrix(a,0,0,d,0,0)即縮放后H'(x'=ax+cy+e=ax,y'=bx+dy+f=dy)
當(dāng)matrix應(yīng)用于旋轉(zhuǎn)rotate時(shí)朝墩，假設(shè)角度為θ醉拓，那么matrix(cosθ,sinθ,-sinθ,cosθ,0,0)，結(jié)合矩陣公式收苏，變化后的坐標(biāo)為x'=xcosθ-ysinθ+0=xcosθ-ysinθ
y'=xsinθ+ycosθ+0=xsinθ+ycosθ
例子：

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

上面代碼表示將元素旋轉(zhuǎn)30°

用于拉伸skew()時(shí)廉嚼，只與b,c相關(guān)，對(duì)于matrix(1,tan(θy),tan(θx),1,0,0)倒戏，套用公式得到x'=x+ytan(θx)+0=x+ytan(θx)y'=xtan(θy)+y+0=xtan(θy)+y怠噪，即2D動(dòng)作之后得到的基點(diǎn)坐標(biāo)為H'[x+ytan(θx),y+xtan(θy)]
那么，舉個(gè)例子杜跷，設(shè)matrix(2,3,4,5,6,7):
當(dāng)基點(diǎn)坐標(biāo)為(x,y)時(shí)傍念，矩陣之后得到的基點(diǎn)坐標(biāo)為H'(2x+4y+6,3x+5y+7),元素寬度為原來(lái)的2倍矫夷，高度為原來(lái)的5倍，還存在拉伸和旋轉(zhuǎn)角度憋槐。當(dāng)然双藕，一般不會(huì)存在這么奇怪的6個(gè)參數(shù)。
用matrix實(shí)現(xiàn)鏡像效果：
鏡像對(duì)稱軸永遠(yuǎn)經(jīng)過(guò)原點(diǎn)(0,0),那么對(duì)稱軸可以用y=kx表示阳仔，已知點(diǎn)(x,y),求其對(duì)稱點(diǎn)(x',y')坐標(biāo)忧陪。

圖片說(shuō)明文字

計(jì)算步驟如下：
(y-y') / (x - x') = -1/ k
(x + x') / 2 * k = (y + y')/2
得到：
ky-ky' = -x+x'
kx+kx' = y+y'
提出x' y':
x' = (1-kk)/(kk+1) x + 2k/(kk+1) y;
y' = 2k/(kk+1) x + (kk-1)/(kk+1) y;
結(jié)合矩陣公式：
x' = ax+cy+e;
y' = bx+dy+f;
可以得到：
a = (1-kk)/(kk+1);
b = 2k/(kk+1);
c = 2k/(kk+1);
d = (kk-1)/(kk+1);

3/21/2017 2:36:16 PM
transform-origin屬性
允許您改變被轉(zhuǎn)換元素的基點(diǎn)位置。
2D轉(zhuǎn)換元素能夠改變?cè)豿和y軸近范。3D 轉(zhuǎn)換元素還能改變其Z軸嘶摊。

最后編輯于：2017.12.08 23:43:06

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市评矩，隨后出現(xiàn)的幾起案子叶堆，更是在濱河造成了極大的恐慌，老刑警劉巖斥杜，帶你破解...
沈念sama閱讀 221,576評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件虱颗，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡蔗喂，警方通過(guò)查閱死者的電腦和手機(jī)忘渔，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,515評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)缰儿，“玉大人辨萍，你說(shuō)我怎么就攤上這事》档” “怎么了锈玉？”我有些...
開封第一講書人閱讀 168,017評(píng)論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)义起。經(jīng)常有香客問(wèn)我拉背，道長(zhǎng)，這世上最難降的妖魔是什么默终？我笑而不...
開封第一講書人閱讀 59,626評(píng)論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任椅棺，我火速辦了婚禮，結(jié)果婚禮上齐蔽，老公的妹妹穿的比我還像新娘两疚。我一直安慰自己，他們只是感情好含滴，可當(dāng)我...
茶點(diǎn)故事閱讀 68,625評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布诱渤。她就那樣靜靜地躺著，像睡著了一般谈况。火紅的嫁衣襯著肌膚如雪勺美。梳的紋絲不亂的頭發(fā)上递胧，一...
開封第一講書人閱讀 52,255評(píng)論 1贊 308
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音赡茸，去河邊找鬼缎脾。笑死，一個(gè)胖子當(dāng)著我的面吹牛占卧，可吹牛的內(nèi)容都是我干的遗菠。我是一名探鬼主播，決...
沈念sama閱讀 40,825評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼华蜒，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼辙纬！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起友多，我...
開封第一講書人閱讀 39,729評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎堤框，沒(méi)想到半個(gè)月后域滥，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,271評(píng)論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡蜈抓，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,363評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年启绰，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沟使。...
茶點(diǎn)故事閱讀 40,498評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡委可，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出腊嗡，到底是詐尸還是另有隱情着倾，我是刑警寧澤，帶...
沈念sama閱讀 36,183評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布燕少，位于F島的核電站卡者，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏客们。R本人自食惡果不足惜崇决，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,867評(píng)論 3贊 333
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望底挫。院中可真熱鬧恒傻，春花似錦、人聲如沸建邓。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,338評(píng)論 0贊 24
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)官边。三九已至扑庞，卻和暖如春譬重，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背罐氨。一陣腳步聲響...
開封第一講書人閱讀 33,458評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工臀规，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人栅隐。一個(gè)月前我還...
沈念sama閱讀 48,906評(píng)論 3贊 376
代替公主和親
正文我出身青樓塔嬉，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親租悄。傳聞我的和親對(duì)象是個(gè)殘疾皇子谨究，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,507評(píng)論 2贊 359

CSS3教程（未完）……

CSS3邊框

CSS3背景

CSS3文本效果

CSS3字體

CSS 2D轉(zhuǎn)換

推薦閱讀更多精彩內(nèi)容