1. border-radius

border-radius請(qǐng)參考文章關(guān)于css3的邊框的border-radius和border-image用法的詳解

要點(diǎn)總結(jié):
border-radius: 接受8個(gè)屬性（這是全寫格式），前四個(gè)為x軸，后四個(gè)為y軸，以斜杠劃分x軸、y軸，即border-radius:左上角右上角右下角左下角 / 左上角右上角右下角左下角 ;（x軸/y軸），如：border-radius: 100px 0 100px 0/100px 0 100px 0。

原理:

首先以div的四個(gè)點(diǎn)做交叉線，把交點(diǎn)作為圓心，記為O。
以border-radius: 100px 0 100px 0/100px 0 100px 0 為例，然后再以左上角為例，取x軸100px處為A點(diǎn)，取y軸100px處為B點(diǎn)，然后以圓心O畫圓（正圓或橢圓），經(jīng)過A和B兩點(diǎn)，則A和B兩點(diǎn)的弧即為border-radius的效果，其他三個(gè)角同理。

2. border-image

border-image請(qǐng)參考文章border-image屬性分析

要點(diǎn)總結(jié):
border-image-slice：top right bottom left。分別指切割背景圖片的四條線距離上右下左的距離。按此規(guī)則將圖分為了9塊，然后將此9塊圖片切片對(duì)應(yīng)到div的相應(yīng)位置，再進(jìn)行相應(yīng)的拉伸或平鋪。請(qǐng)看動(dòng)圖演示：

border-image.gif

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

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的相關(guān)特性

background-position

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

如果取值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相關(guān)屬性可一次設(shè)置多個(gè)值，例如：

#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ū)別

請(qǐng)參考HTML/CSS: background-clip 與 background-origin的區(qū)別
要點(diǎn)總結(jié):

background-origin指的是從哪里開始定位背景圖。
background-clip指的是從哪里開始裁剪背景圖或背景顏色。舉例：假如background-origin設(shè)置為border-box，background-clip設(shè)置為content-box，那么背景圖會(huì)從border那開始定位，從content那開始裁剪，出現(xiàn)的結(jié)果就是，背景圖有一部分被裁剪沒了。

background-attachment（CSS1屬性）

background-attachment設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。取值有scroll、fixed、inherit

background-attachment

參考文章 background-attachment屬性進(jìn)階

要點(diǎn)總結(jié):
scroll:默認(rèn)值，背景圖相對(duì)于元素固定，背景隨頁面滾動(dòng)而移動(dòng)，即背景和內(nèi)容綁定。
fixed：背景圖相對(duì)于視口固定，所以隨頁面滾動(dòng)背景不動(dòng)，相當(dāng)于背景被設(shè)置在了body上。
local：背景圖相對(duì)于元素內(nèi)容固定，
inhert:繼承，沒什么說的。
該屬性可以應(yīng)用于任何元素。

重點(diǎn):
對(duì)于scroll，一般情況背景隨內(nèi)容滾動(dòng)，但是有一種情況例外。對(duì)于可以滾動(dòng)的元素（設(shè)置為overflow:scroll的元素）。當(dāng)background-attachment設(shè)置為scroll時(shí)，背景圖不會(huì)隨元素內(nèi)容的滾動(dòng)而滾動(dòng)。

對(duì)于可以滾動(dòng)的元素（設(shè)置為overflow:scroll的元素）,設(shè)置background-attachment:local，則背景會(huì)隨內(nèi)容的滾動(dòng)而滾動(dòng)。因?yàn)楸尘皥D是相對(duì)于元素自身內(nèi)容定位，開始固定，元素出現(xiàn)滾動(dòng)條后背景圖隨內(nèi)容而滾動(dòng)。

給任何元素的背景圖設(shè)置background-attachment: fixed;效果都是一樣的，都是相對(duì)于視口，因?yàn)橐粋€(gè)網(wǎng)頁只有一個(gè)視口，該背景和元素已經(jīng)沒關(guān)系了，要說有關(guān)大概也只是元素不可見則背景圖不可見。

4. CSS3 漸變（Gradients）

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

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向

要點(diǎn)總結(jié):

語法background: linear-gradient(direction, color-stop1, color-stop2, ...);
默認(rèn)漸進(jìn)方向是從上到下。

#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); /* 標(biāo)準(zhǔn)的語法 */
}

從左到右（注意標(biāo)準(zhǔn)語法的 to 關(guān)鍵字）

#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); /* 標(biāo)準(zhǔn)的語法 */
}

對(duì)角

#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); /* 標(biāo)準(zhǔn)的語法 */
}

使用角度，語法 background: linear-gradient(angle, color-stop1, color-stop2);
重中之重：現(xiàn)代瀏覽器如何規(guī)定角度，請(qǐng)看下圖

gradient-angle.jpg

但是，請(qǐng)注意很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標(biāo)準(zhǔn)，即 0deg 將創(chuàng)建一個(gè)從左到右的漸變，90deg 將創(chuàng)建一個(gè)從下到上的漸變。換算公式 90 - x = y 其中 x 為標(biāo)準(zhǔn)角度，y為非標(biāo)準(zhǔn)角度。相當(dāng)于
-webkit-linear-gradient(90deg,red,blue) = linear-gradient(0deg,red,blue)

帶角度的話，如何計(jì)算起始點(diǎn)：

liner-gradient-angle.png

使用透明度（transparent）
為了添加透明度，我們使用 rgba() 函數(shù)來定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。下面的實(shí)例演示了從左邊開始的線性漸變。起點(diǎn)是完全透明，慢慢過渡到完全不透明的紅色：

#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)); /* 標(biāo)準(zhǔn)的語法 */
}

色標(biāo)（非常重要）

先對(duì)此條來個(gè)總結(jié)：相鄰兩個(gè)顏色節(jié)點(diǎn)之間，如果顏色不一致，則平滑過渡；
如果顏色一致，則這兩個(gè)節(jié)點(diǎn)之間為純色，下例為其中的一個(gè)特殊個(gè)例；

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

如果兩個(gè)顏色節(jié)點(diǎn)占據(jù)了同一個(gè)位置，則突然過渡。

瀏覽器對(duì)于色標(biāo)并沒有默認(rèn)值，且必須設(shè)置至少兩個(gè)色標(biāo)。色標(biāo)由顏色和位置組成。顏色使用任何一種顏色模式都可以，而位置可以使用百分比或數(shù)值。

【1】位置可以省略，瀏覽器默認(rèn)會(huì)把第一個(gè)顏色的位置設(shè)置為0%，把最后一個(gè)顏色的位置設(shè)置為100%

【2】若漸變只有兩種顏色，且第一個(gè)顏色的位置設(shè)置為n%，第二個(gè)顏色的位置設(shè)置為m%。則瀏覽器會(huì)將0%-n%的范圍設(shè)置為第一個(gè)顏色的純色，n%-m%的范圍設(shè)置為第一個(gè)顏色到第二個(gè)顏色的過渡，m%-100%的范圍設(shè)置為第二個(gè)顏色的純色

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

【3】若多色占據(jù)同一個(gè)位置，例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);
//等價(jià)于上一個(gè)
background-image: linear-gradient(red,yellow 50%,black 50%,blue);

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

重復(fù)的線性漸變（只有當(dāng)首尾兩顏色位置不同時(shí)在0%和100%時(shí)，重復(fù)漸變才生效）

#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%);
  /* 標(biāo)準(zhǔn)的語法 */
  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%)

試想，如果等同的話，兩頭一個(gè)是紅色的純色，一個(gè)是藍(lán)色的純色，還怎么實(shí)現(xiàn)重復(fù)的功能。所以實(shí)現(xiàn)原理是，從20%的地方開始線性過渡，一直到50%的地方，這一個(gè)區(qū)間便是重復(fù)線性漸變的一個(gè)單元（我們記這個(gè)初始單元為item0吧），然后用此單元順著線性漸變的方向不斷重復(fù)。像上面這個(gè)例子background-image:repeating-linear-gradient(red 20%, blue 50%)，兩頭還有剩余空間，上頭空間空著，下頭空間不夠，怎么辦？下頭還是繼續(xù)放一個(gè)單元，放不下的就截掉。上頭也放n（n可能大于等于1）個(gè)單元，但是要以n個(gè)整單元的最下邊緊貼item0的最上面。請(qǐng)看此案例的效果圖（要特別注意兩頭）：

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>重復(fù)線性漸變</h3>
    <div id="grad1"></div>
</body>
</html>

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

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

你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（表示在中心點(diǎn)），漸變的形狀是 ellipse（表示橢圓形；當(dāng)div的width和height值不相同時(shí)，漸進(jìn)效果默認(rèn)是橢圓；當(dāng)div的width和height值相同時(shí)，漸進(jìn)效果默認(rèn)是正圓；其實(shí)也不難理解，正圓本身就是橢圓的一種特例。），漸變的大?。╯ize參數(shù)）是 farthest-corner（表示到最遠(yuǎn)的角落，其他的取值還有closest-side、farthest-side、closest-corner；表示從漸變中心到size值所代表的點(diǎn)的距離為漸變半徑）。

徑向漸變的其他特性請(qǐng)參考線性漸變

5. CSS3 文本效果

要點(diǎn)總結(jié)：（優(yōu)先級(jí)順序：white-space > word-break > word-wrap）

box-shadow和text-shadow除了一個(gè)應(yīng)用于盒子模型，一個(gè)應(yīng)用于文字，其他一樣。
white-space：規(guī)定整段文字遇到換行符等是否換行。如果不允許換行，那么接下來的word-break和word-wrap都不起作用了。
word-break：當(dāng)某個(gè)單詞到容器邊界還沒顯示完全時(shí)，如何處理這個(gè)單詞。定義了規(guī)則。取值keep-all表示保全每個(gè)單詞，當(dāng)下一個(gè)單詞在這一行顯示不完全時(shí)，把它放入下一行顯示，如果讓這個(gè)單詞占整一行還放不下時(shí)，就需要設(shè)置word-wrap:break-word;讓這個(gè)單詞換行；取值break-all表示文字把每一行都占滿，不管每行的最后那個(gè)單詞是否顯示正確，到了容器邊界就將其截開換到下一行繼續(xù)。在此取值情況下，word-wrap無論設(shè)置何值都無變化。
word-wrap：當(dāng)整一行都放不下某個(gè)單詞時(shí)，如何處理該單詞。

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; //同一類字體下不同的字體風(fēng)格
        }

        div {
            font-family: myFirstFont;
            /**
             font-weight: bold; //默認(rèn)用到sansation_light.woff這個(gè)字體文件；如果此行代碼解注釋，就會(huì)用到sansation_bold.woff這個(gè)字體文件
            */
        }

7. CSS3 2D、3D 轉(zhuǎn)換（transform）

矩陣乘法

矩陣.png

特效屬性「Transform」+ 矩陣 matrix（重點(diǎn)看）

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

文字說明：

區(qū)域OABC為原div
D點(diǎn)為該區(qū)域中心
因?yàn)閤軸傾斜20deg，做輔助線m線；因?yàn)閥軸傾斜20deg，做輔助線n線
I、J、K、L四點(diǎn)分別為區(qū)域OABC中心線與四邊的交點(diǎn)
分別過K點(diǎn)和I點(diǎn)做平行線，平行于m線；分別過L點(diǎn)和J點(diǎn)做平行線，平行于n線；
以上所做四條線分別交于E、F、G、H點(diǎn)
連接E、F、G、H點(diǎn)所得區(qū)域即為transform: skew(20deg,10deg);的效果圖
原理：D點(diǎn)也為區(qū)域EFGH的中心點(diǎn)，區(qū)域EFGH的線LJ等于原div的高，區(qū)域EFGH的線KI等于原div的寬

3D轉(zhuǎn)換

3D旋轉(zhuǎn)軸.png

其中，網(wǎng)布就是我們的屏幕，x軸沿屏幕平行的水平方向，y軸沿屏幕平行的垂直方向，z軸沿與屏幕垂直方向。

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

Note：關(guān)于這篇文章我有一條知識(shí)點(diǎn)補(bǔ)充，元素的旋轉(zhuǎn)應(yīng)該是整個(gè)坐標(biāo)軸都跟著旋轉(zhuǎn)的，要不然沒法解釋圖片的旋轉(zhuǎn)木馬效果demo中為什么每個(gè)圖片都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;/* 屬性名 過渡時(shí)間；屬性值從一個(gè)變?yōu)榱硪粋€(gè)，在一段時(shí)間內(nèi)平滑過渡； transform也是一個(gè)屬性名，它的值用來做2D/3D轉(zhuǎn)換*/
        }
        div:hover {
            width: 200px;
            height: 200px;
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
<p><b>注意：</b>該實(shí)例無法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠標(biāo)移動(dòng)到 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屬性值不同的都會(huì)變化。

9. CSS3 動(dòng)畫

思路：在選擇的元素中使用animation屬性，該屬性值為動(dòng)畫名稱時(shí)間；動(dòng)畫名稱由@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> 該實(shí)例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
<div></div>
</body>
</html>

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

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

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>英國(guó)維斯米斯特教堂碑文</h2>
當(dāng)我年輕的時(shí)候，我夢(mèng)想改變這個(gè)世界；當(dāng)我成熟以后，我發(fā)現(xiàn)我不能夠改變這個(gè)世界，我將目光縮短了些，決定只改變我的國(guó)家；當(dāng)我進(jìn)入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國(guó)家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當(dāng)我現(xiàn)在躺在床上，行將就木時(shí)，我突然意識(shí)到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵(lì)下，我可能為國(guó)家做一些事情；然后，誰知道呢?我甚至可能改變這個(gè)世界。
</div>
</body>
</html>

效果圖：

column-span-1.png

如果不設(shè)置column-span屬性的效果圖如下：

column-span-2.png

11. CSS3 用戶界面

CSS3 調(diào)整尺寸(Resizing)

div
{
    resize:both; /* 可以橫向、可以豎向、也可以同時(shí)兩個(gè)方向*/
    overflow:auto;
}

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

resize.png

CSS3 外形修飾（outline-offset ）

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

重點(diǎn)：outline不占據(jù)空間，對(duì)周圍元素?zé)o影響，證明圖如下

outline.png

12. CSS濾鏡

簡(jiǎn)單語法：

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

關(guān)鍵字為filter，其屬性值非常復(fù)雜，詳細(xì)解釋請(qǐng)看文章：你所不知道的 CSS 濾鏡技巧與細(xì)節(jié)

13. CSS3 彈性盒子(Flex Box)

請(qǐng)認(rèn)真閱讀文章：

Flex 布局教程：語法篇
Flex 布局教程：實(shí)例篇

我自己的要點(diǎn)總結(jié)：（待續(xù)）

14. CSS3 多媒體查詢

多媒體查詢，查詢什么：

viewport(視窗) 的寬度與高度
設(shè)備的寬度與高度
朝向 (智能手機(jī)橫屏，豎屏) 。
分辨率

語法：

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

not: 排除某種設(shè)備
only: 指定只有這種設(shè)備
all: 所有設(shè)備

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

CSS3 多媒體類型：

all 用于所有多媒體類型設(shè)備
print 用于打印機(jī)
screen 用于電腦屏幕，平板，智能手機(jī)等。
speech 用于屏幕閱讀器

以下實(shí)例在屏幕可視窗口尺寸大于 480 像素時(shí)將菜單浮動(dòng)到頁面左側(cè)：

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

當(dāng)瀏覽器的寬度在 520 到 699px, 郵箱鏈接前添加郵件圖標(biāo)：

@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;
    }
}

其他小零碎總結(jié)

假設(shè)父元素中只有三個(gè)子元素，這三個(gè)子元素左浮動(dòng)，那么父元素會(huì)坍陷為0×0，解決辦法：要么父元素也浮動(dòng)；要么父元素加一個(gè)偽類來清除浮動(dòng)
css 的 + 選擇器表示相鄰元素，使用場(chǎng)景比如：每?jī)蓚€(gè)相鄰元素之間做某些處理。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS 屬性解疑答惑(基本為CSS3)

CSS 屬性解疑答惑(基本為CSS3)

1. border-radius

2. border-image

3. background的相關(guān)特性

background-position

background相關(guān)屬性可一次設(shè)置多個(gè)值，例如：

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

background-attachment（CSS1屬性）

background-attachment

4. CSS3 漸變（Gradients）

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向

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

5. CSS3 文本效果

6. CSS3 字體

7. CSS3 2D、3D 轉(zhuǎn)換（transform）

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

8. CSS3 過渡（transition）

9. CSS3 動(dòng)畫

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

11. CSS3 用戶界面

12. CSS濾鏡

13. CSS3 彈性盒子(Flex Box)

14. CSS3 多媒體查詢

其他小零碎總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS 屬性解疑答惑(基本為CSS3)

1. border-radius

2. border-image

3. background的相關(guān)特性

background-position

background相關(guān)屬性可一次設(shè)置多個(gè)值，例如：

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

background-attachment（CSS1屬性）

background-attachment

4. CSS3 漸變（Gradients）

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向

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

5. CSS3 文本效果

6. CSS3 字體

7. CSS3 2D、3D 轉(zhuǎn)換（transform）

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

8. CSS3 過渡（transition）

9. CSS3 動(dòng)畫

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

11. CSS3 用戶界面

12. CSS濾鏡

13. CSS3 彈性盒子(Flex Box)

14. CSS3 多媒體查詢

其他小零碎總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

background相關(guān)屬性可一次設(shè)置多個(gè)值，例如：

7. CSS3 2D、3D 轉(zhuǎn)換（transform）

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