1. border-radius

border-radius請參考文章關于css3的邊框的border-radius和border-image用法的詳解

要點總結:
border-radius: 接受8個屬性（這是全寫格式）墩崩，前四個為x軸帮哈，后四個為y軸辫红，以斜杠劃分x軸辞居、y軸也糊，即border-radius:左上角 右上角 右下角 左下角 / 左上角 右上角 右下 角 左下角 ;（x軸/y軸 ）问裕，如：border-radius: 100px 0 100px 0/100px 0 100px 0。

原理:

1. 首先以div的四個點做交叉線颓遏，把交點作為圓心徐矩，記為O。
2. 以border-radius: 100px 0 100px 0/100px 0 100px 0 為例叁幢，然后再以左上角為例滤灯，取x軸100px處為A點，取y軸100px處為B點曼玩，然后以圓心O畫圓（正圓或橢圓）鳞骤，經(jīng)過A和B兩點，則A和B兩點的弧即為border-radius的效果黍判，其他三個角同理豫尽。

2. border-image

border-image請參考文章border-image屬性分析

要點總結:
border-image-slice：top right bottom left。分別指切割背景圖片的四條線距離上右下左的距離样悟。按此規(guī)則將圖分為了9塊拂募，然后將此9塊圖片切片對應到div的相應位置庭猩，再進行相應的拉伸或平鋪窟她。請看動圖演示：

border-image.gif

新版Chrome瀏覽器border-image屬性不生效
在stack overflow找到答案，說是在用border-image屬性之前加上該屬性即可：border：27px solid transparent蔼水；后看到國內(nèi)某博主說只要設置成border: 27px soild就行震糖。后經(jīng)嘗試，確實如此 趴腋。
復合屬性需要添加瀏覽器前綴吊说，單個屬性不需添加前綴
當使用復合屬性時，需要添加前綴优炬，像這樣：

border-image: url("img/border.png") fill 10;    /*IE11*/
-webkit-border-image: url("img/border.png") 10;    /*Chrome和Safari*/
-moz-border-image: url("img/border.png") fill 10;    /*Firefox*/
-o-border-image: url("img/border.png") 10;    /*Opera*/

3. background的相關特性

• background-position

當背景圖片尺寸（background-size）不做任何的重置（也就是100% 100%）時颁井，水平百分比的值等于容器寬度百分比值減去背景圖片寬度百分比值。垂直百分比的值等于容器高度百分比值減去背景圖片高度百分比值蠢护。

如果取值background-position: 75% 50%;雅宾，背景圖片的起始位置：

• 水平位置（x軸）：(410 - 100) * 75% = 232.5px
• 垂直位置（y軸）：(210 - 100) * 50% = 55px

原文: https://www.w3cplus.com/css/background-position-with-percent.html ? w3cplus.com

• background相關屬性可一次設置多個值，例如：

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

或者

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

• background-clip 與 background-origin的區(qū)別

請參考HTML/CSS: background-clip 與 background-origin的區(qū)別
要點總結:

1. background-origin指的是從哪里開始定位背景圖葵硕。
2. background-clip指的是從哪里開始裁剪背景圖或背景顏色眉抬。舉例：假如background-origin設置為border-box贯吓，background-clip設置為content-box，那么背景圖會從border那開始定位蜀变，從content那開始裁剪悄谐，出現(xiàn)的結果就是，背景圖有一部分被裁剪沒了库北。

• background-attachment（CSS1屬性）

background-attachment設置背景圖像是否固定或者隨著頁面的其余部分滾動爬舰。取值有scroll、fixed寒瓦、inherit

• background-attachment

參考文章 background-attachment屬性進階

要點總結:
scroll:默認值洼专，背景圖相對于元素固定，背景隨頁面滾動而移動孵构，即背景和內(nèi)容綁定屁商。
fixed：背景圖相對于視口固定，所以隨頁面滾動背景不動颈墅，相當于背景被設置在了body上蜡镶。
local：背景圖相對于元素內(nèi)容固定，
inhert:繼承恤筛，沒什么說的官还。
該屬性可以應用于任何元素。

重點:
對于scroll毒坛，一般情況背景隨內(nèi)容滾動望伦，但是有一種情況例外。對于可以滾動的元素（設置為overflow:scroll的元素）煎殷。當background-attachment設置為scroll時屯伞，背景圖不會隨元素內(nèi)容的滾動而滾動。

對于可以滾動的元素（設置為overflow:scroll的元素）,設置background-attachment:local豪直，則背景會隨內(nèi)容的滾動而滾動劣摇。因為背景圖是相對于元素自身內(nèi)容定位，開始固定弓乙，元素出現(xiàn)滾動條后背景圖隨內(nèi)容而滾動末融。

給任何元素的背景圖設置background-attachment: fixed;效果都是一樣的，都是相對于視口暇韧，因為一個網(wǎng)頁只有一個視口勾习，該背景和元素已經(jīng)沒關系了，要說有關大概也只是元素不可見則背景圖不可見懈玻。

4. CSS3 漸變（Gradients）

參考文章為： 深入理解CSS線性漸變linear-gradient
例題小測試：CSS3重復漸變（線性和徑向漸變）

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

要點總結:

1. 語法background: linear-gradient(direction, color-stop1, color-stop2, ...);
2. 默認漸進方向是從上到下巧婶。

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 標準的語法 */
}

3. 從左到右（注意標準語法的 to 關鍵字）

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 標準的語法 */
}

4. 對角

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */
}

5. 使用角度，語法 background: linear-gradient(angle, color-stop1, color-stop2);
   重中之重：現(xiàn)代瀏覽器如何規(guī)定角度，請看下圖
   
   gradient-angle.jpg
   
   但是粹舵，請注意很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標準钮孵，即 0deg 將創(chuàng)建一個從左到右的漸變，90deg 將創(chuàng)建一個從下到上的漸變眼滤。換算公式 90 - x = y 其中 x 為標準角度巴席，y為非標準角度。相當于
   -webkit-linear-gradient(90deg,red,blue) = linear-gradient(0deg,red,blue)

帶角度的話诅需，如何計算起始點：

liner-gradient-angle.png

6. 使用透明度（transparent）
   為了添加透明度漾唉，我們使用 rgba() 函數(shù)來定義顏色結點。rgba() 函數(shù)中的最后一個參數(shù)可以是從 0 到 1 的值堰塌，它定義了顏色的透明度：0 表示完全透明赵刑，1 表示完全不透明。下面的實例演示了從左邊開始的線性漸變场刑。起點是完全透明般此，慢慢過渡到完全不透明的紅色：

#grad {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標準的語法 */
}

7. 色標（非常重要）

• 先對此條來個總結：相鄰兩個顏色節(jié)點之間，如果顏色不一致牵现，則平滑過渡茧彤；
• 如果顏色一致硫麻，則這兩個節(jié)點之間為純色可霎，下例為其中的一個特殊個例割卖；

background-image: linear-gradient(red 30%,blue 60%);
//等價于: 
background-image: linear-gradient(red 0%,red 30%,blue 60%,blue 100%);

• 如果兩個顏色節(jié)點占據(jù)了同一個位置，則突然過渡贼急。

瀏覽器對于色標并沒有默認值茅茂，且必須設置至少兩個色標。色標由顏色和位置組成太抓。顏色使用任何一種顏色模式都可以空闲，而位置可以使用百分比或數(shù)值。

【1】位置可以省略腻异，瀏覽器默認會把第一個顏色的位置設置為0%进副，把最后一個顏色的位置設置為100%

【2】若漸變只有兩種顏色，且第一個顏色的位置設置為n%悔常，第二個顏色的位置設置為m%。則瀏覽器會將0%-n%的范圍設置為第一個顏色的純色给赞，n%-m%的范圍設置為第一個顏色到第二個顏色的過渡机打，m%-100%的范圍設置為第二個顏色的純色

background-image: linear-gradient(red 30%,blue 60%);
//等價于上一個
background-image: linear-gradient(red 0%,red 30%,blue 60%,blue 100%);

【3】若多色占據(jù)同一個位置，例a片迅、b残邀、c三色均占據(jù)n%這一位置，則0%-n%為前一種顏色與a顏色的顏色漸變；然后是n%-n%的a顏色與c顏色的顏色突變芥挣；n%-100%是c顏色與后一種顏色的顏色漸變驱闷。因此，中間的b是無用的

background-image: linear-gradient(red,yellow 50%,white 50%,black 50%,blue);
//等價于上一個
background-image: linear-gradient(red,yellow 50%,black 50%,blue);

【4】在CSS樣式中空免，漸變相當于背景圖片空另，在理論上可在任何使用url()值的地方采用。比如最常見的background-image蹋砚、list-style-image以及border-image扼菠。但目前為止，僅在背景圖片中得到完美的支持

8. 重復的線性漸變（只有當首尾兩顏色位置不同時在0%和100%時坝咐，重復漸變才生效）

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 標準的語法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

案例說明：

background-image:repeating-linear-gradient(red 20%, blue 50%)

不等同于

background-image:repeating-linear-gradient(red 0%, red 20%, blue 50%, blue 100%)

試想循榆，如果等同的話，兩頭一個是紅色的純色墨坚，一個是藍色的純色秧饮，還怎么實現(xiàn)重復的功能。所以實現(xiàn)原理是泽篮，從20%的地方開始線性過渡浦楣，一直到50%的地方，這一個區(qū)間便是重復線性漸變的一個單元（我們記這個初始單元為item0吧）咪辱，然后用此單元順著線性漸變的方向不斷重復振劳。像上面這個例子background-image:repeating-linear-gradient(red 20%, blue 50%)，兩頭還有剩余空間油狂，上頭空間空著历恐，下頭空間不夠，怎么辦专筷？下頭還是繼續(xù)放一個單元弱贼，放不下的就截掉。上頭也放n（n可能大于等于1）個單元磷蛹，但是要以n個整單元的最下邊緊貼item0的最上面吮旅。請看此案例的效果圖（要特別注意兩頭）：

repeat-liner-gradient.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>repeat liner gradient</title>
    <style>
        #grad1 {
            height: 200px;
            width: 200px;
            background-image: repeating-linear-gradient(red 20%, blue 50%)
        }
    </style>
</head>
<body>
    <h3>重復線性漸變</h3>
    <div id="grad1"></div>
</body>
</html>

• 徑向漸變（Radial Gradients）- 由它們的中心定義

語法： background: radial-gradient(center, shape size, start-color, ..., last-color);

你也可以指定漸變的中心、形狀（圓形或橢圓形）味咳、大小庇勃。默認情況下，漸變的中心是 center（表示在中心點）槽驶，漸變的形狀是 ellipse（表示橢圓形责嚷；當div的width和height值不相同時，漸進效果默認是橢圓掂铐；當div的width和height值相同時罕拂，漸進效果默認是正圓揍异；其實也不難理解，正圓本身就是橢圓的一種特例爆班。）衷掷，漸變的大小（size參數(shù)）是 farthest-corner（表示到最遠的角落柿菩，其他的取值還有closest-side戚嗅、farthest-side、closest-corner碗旅；表示從漸變中心到size值所代表的點的距離為漸變半徑）渡处。

徑向漸變的其他特性請參考線性漸變

5. CSS3 文本效果

要點總結：（優(yōu)先級順序：white-space > word-break > word-wrap）

• box-shadow和text-shadow除了一個應用于盒子模型，一個應用于文字祟辟，其他一樣医瘫。
• white-space：規(guī)定整段文字遇到換行符等是否換行。如果不允許換行旧困，那么接下來的word-break和word-wrap都不起作用了醇份。
• word-break：當某個單詞到容器邊界還沒顯示完全時，如何處理這個單詞吼具。定義了規(guī)則僚纷。取值keep-all表示保全每個單詞，當下一個單詞在這一行顯示不完全時拗盒，把它放入下一行顯示怖竭，如果讓這個單詞占整一行還放不下時，就需要設置word-wrap:break-word;讓這個單詞換行陡蝇；取值break-all表示文字把每一行都占滿痊臭，不管每行的最后那個單詞是否顯示正確，到了容器邊界就將其截開換到下一行繼續(xù)登夫。在此取值情況下广匙，word-wrap無論設置何值都無變化。
• word-wrap：當整一行都放不下某個單詞時恼策，如何處理該單詞鸦致。

6. CSS3 字體

廢話少說，直接看代碼

        @font-face {
            font-family: myFirstFont; //自定義的字體名稱
            src: url(sansation_light.woff); //字體文件路徑
        }

        @font-face {
            font-family: myFirstFont; //同樣的字體名稱
            src: url(sansation_bold.woff); //不同的字體文件
            font-weight:bold; //同一類字體下不同的字體風格
        }

        div {
            font-family: myFirstFont;
            /**
             font-weight: bold; //默認用到sansation_light.woff這個字體文件涣楷；如果此行代碼解注釋分唾，就會用到sansation_bold.woff這個字體文件
            */
        }

7. CSS3 2D、3D 轉換（transform）

• 矩陣乘法
  
  矩陣.png

• 特效屬性「Transform」+ 矩陣 matrix（重點看）

• transform: skew(20deg,10deg);原理解析

div
{
transform: skew(20deg,10deg);
-ms-transform: skew(20deg,10deg); /* IE 9 */
-webkit-transform: skew(20deg,10deg); /* Safari and Chrome */
}

示意圖：

skew.jpeg

文字說明：

1. 區(qū)域OABC為原div
2. D點為該區(qū)域中心
3. 因為x軸傾斜20deg总棵，做輔助線m線鳍寂；因為y軸傾斜20deg，做輔助線n線
4. I情龄、J迄汛、K、L四點分別為區(qū)域OABC中心線與四邊的交點
5. 分別過K點和I點做平行線骤视，平行于m線鞍爱；分別過L點和J點做平行線，平行于n線专酗；
6. 以上所做四條線分別交于E睹逃、F、G祷肯、H點
7. 連接E沉填、F、G佑笋、H點所得區(qū)域即為transform: skew(20deg,10deg);的效果圖
8. 原理：D點也為區(qū)域EFGH的中心點翼闹，區(qū)域EFGH的線LJ等于原div的高，區(qū)域EFGH的線KI等于原div的寬

• 3D轉換
  
  3D旋轉軸.png
  
  其中蒋纬，網(wǎng)布就是我們的屏幕猎荠，x軸沿屏幕平行的水平方向，y軸沿屏幕平行的垂直方向蜀备，z軸沿與屏幕垂直方向关摇。

非常精彩的文章，必須看：好吧碾阁，CSS3 3D transform變換输虱，不過如此！

Note：關于這篇文章我有一條知識點補充脂凶，元素的旋轉應該是整個坐標軸都跟著旋轉的宪睹，要不然沒法解釋圖片的旋轉木馬效果demo中為什么每個圖片都translateZ同樣的數(shù)值。

8. CSS3 過渡（transition）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鳥教程(runoob.com)</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s, height 2s, transform 2s;/* 屬性名 過渡時間艰猬；屬性值從一個變?yōu)榱硪粋€横堡，在一段時間內(nèi)平滑過渡； transform也是一個屬性名冠桃，它的值用來做2D/3D轉換*/
        }
        div:hover {
            width: 200px;
            height: 200px;
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
<p><b>注意：</b>該實例無法在 Internet Explorer 9 及更早 IE 版本上工作命贴。</p>
<div>鼠標移動到 div 元素上，查看過渡效果食听。</div>
</body>
</html>

小例子：

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}
a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

解釋：transition: 0.3s; 代表啥意思胸蛛？a與a:hover屬性值不同的都會變化。

9. CSS3 動畫

思路：在選擇的元素中使用animation屬性樱报，該屬性值為動畫名稱 時間葬项；動畫名稱由@keyframes定義

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鳥教程(runoob.com)</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            animation: myfirst 5s;
            -webkit-animation: myfirst 5s; /* Safari and Chrome */
        }
        @keyframes myfirst {
            from {background: red;} /* 這里面可以寫transform */
            /* 或者是 0% {background: red;} */
            to {background: yellow;}
            /* 或者是 100% {background: yellow;} */
        }
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            from {background: red;}
            /* 或者是 0% {background: red;} */
            to {background: yellow;}
            /* 或者是 100% {background: yellow;} */
        }
    </style>
</head>
<body>
<p><b>注意:</b> 該實例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
<div></div>
</body>
</html>

transition過渡 與 animation動畫 的區(qū)別是：前者需要觸發(fā)迹蛤，后者可以自動民珍。

10. CSS3 多列（可以將文本內(nèi)容設計成像報紙一樣的多列布局）

column-rule.png

• column-count： 分成幾列
• column-gap：列之間的間隙
• column-width：列寬
• column-span：跨幾列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
.newspaper
{
    column-count:3;
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
}
h2
{
    column-span:all;
    -webkit-column-span:all; /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性襟士。</p>
<div class="newspaper">
<h2>英國維斯米斯特教堂碑文</h2>
當我年輕的時候，我夢想改變這個世界嚷量；當我成熟以后陋桂，我發(fā)現(xiàn)我不能夠改變這個世界，我將目光縮短了些蝶溶，決定只改變我的國家嗜历；當我進入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國家抖所，我的最后愿望僅僅是改變一下我的家庭梨州，但是，這也不可能田轧。當我現(xiàn)在躺在床上暴匠，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己涯鲁，然后巷查，我可能改變我的家庭；在家人的幫助和鼓勵下抹腿，我可能為國家做一些事情岛请；然后，誰知道呢?我甚至可能改變這個世界警绩。
</div>
</body>
</html>

效果圖：

column-span-1.png

如果不設置column-span屬性的效果圖如下：

column-span-2.png

11. CSS3 用戶界面

• CSS3 調整尺寸(Resizing)

div
{
    resize:both; /* 可以橫向崇败、可以豎向、也可以同時兩個方向*/
    overflow:auto;
}

效果圖：（注意看右下角）

resize.png

• CSS3 外形修飾（outline-offset ）

div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

重點：outline不占據(jù)空間肩祥，對周圍元素無影響后室，證明圖如下

outline.png

12. CSS濾鏡

簡單語法：

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

關鍵字為filter，其屬性值非常復雜混狠，詳細解釋請看文章：你所不知道的 CSS 濾鏡技巧與細節(jié)

13. CSS3 彈性盒子(Flex Box)

請認真閱讀文章：

• Flex 布局教程：語法篇
• Flex 布局教程：實例篇

我自己的要點總結：（待續(xù)）

14. CSS3 多媒體查詢

多媒體查詢岸霹，查詢什么：

• viewport(視窗) 的寬度與高度
• 設備的寬度與高度
• 朝向 (智能手機橫屏，豎屏) 将饺。
• 分辨率

語法：

//多媒體查詢由多種媒體組成贡避，可以包含一個或多個表達式，表達式根據(jù)條件是否成立返回 true 或 false予弧。
@media not|only mediatype and (expressions) {
    CSS 代碼...;
}

• not: 排除某種設備
• only: 指定只有這種設備
• all: 所有設備

也可以在不同的媒體上使用不同的樣式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 多媒體類型：

• all 用于所有多媒體類型設備
• print 用于打印機
• screen 用于電腦屏幕刮吧，平板，智能手機等掖蛤。
• speech 用于屏幕閱讀器

以下實例在屏幕可視窗口尺寸大于 480 像素時將菜單浮動到頁面左側：

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

當瀏覽器的寬度在 520 到 699px, 郵箱鏈接前添加郵件圖標：

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

其他小零碎總結

• 假設父元素中只有三個子元素杀捻，這三個子元素左浮動，那么父元素會坍陷為0×0蚓庭，解決辦法：要么父元素也浮動致讥；要么父元素加一個偽類來清除浮動
• css 的 + 選擇器表示相鄰元素仅仆，使用場景比如：每兩個相鄰元素之間做某些處理。