CSS3筆記

CSS3 完全向後兼容，因此您不必改變現有的設計。瀏覽器通常支持 CSS2。CSS3被劃分爲模塊。最重要的爲選擇器，匡模型，背景和邊框，文本效果，2D/3D轉換，動畫，多列布局和用戶界面。W3C 仍然在對 CSS3 規範進行開發。CSS3相對於之前學到CSS，有一些新的內容。

CSS3邊框

在這裏可以創建圓角邊框，向矩形添加陰影，使用圖片來繪製邊框。

border-radius 屬性用於創建圓角，數值是某個角落的圓角大小。border-radius 屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性。*可以爲top-left，top-right，bottom-left，bottom-left。語法爲

border-radius: 1-4 length|% / 1-4 length|%;

按此順序設置每個 radii 的四個值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。意思和之前margin和padding的屬性是一樣的，可以有1-4個值。"/"前後的兩個值分別表示的是水平半徑和垂直半徑。border-top-left:200px 100px表示左上方水平有100px的直線會被彎曲，左上方垂直有50px的直線會被彎曲（好像是水平直徑和垂直直徑呀~實驗做的少，沒有深究）

border-radius: 2em 1em 4em / 0.5em 3em;
等價於：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

這麼簡寫爲什麼也沒有深究。非簡寫屬性中時不支持"/"符號的，只能用空格。而且必須是上和下在前，左右在後面。

box-shadow 屬性向框添加一個或多個陰影。語法是

box-shadow: h-shadow v-shadow blur spread color inset;

前兩個屬性值必須要填，表示水平和垂直陰影的位置。允許爲負值。第三個blur表示模糊的距離。spread表示陰影的尺寸。後面是陰影的顏色和陰影是不是內部陰影（默認是外部陰影，inset是內部陰影）需要注意的是模糊的距離是按照陰影外邊向內開始計算的。陰影的尺寸是按照原有圖像的邊爲基準向外擴張的長度。這裏可以跳過這兩個屬性值，直接進入後邊兩個。

border-image 屬性是一個簡寫屬性，規定了用作邊框的圖片。用於設置以下屬性，如果省略值，會設置其默認值。

border-image-source用在邊框的圖片的路徑。

border-image-slice圖片邊框向內偏移。

border-image-width圖片邊框的寬度。

border-image-outset邊框圖像區域超出邊框的量。

border-image-repeat圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

（經過我很多次的實驗，並沒有搞清楚，我看張鑫旭的網頁上解釋的挺仔細的，W3school沒有講多少，語法都沒有寫）

CSS3 背景屬性

background-clip 屬性規定背景的繪製區域。語法是

background-clip: border-box|padding-box|content-box;

border-box背景被裁剪到邊框盒。padding-box背景被裁剪到內邊距框。content-box背景被裁剪到內容框。這裏要說明的是，第一個包含了後兩個，第二個包含了最後一個，最後一個只是最後一個。不是說只在邊框盒子裏，是包括邊框盒和內邊距框和內容框一起的。但是好像沒有提到margin。

background-origin 屬性規定 background-position 屬性相對於什麼位置來定位。語法：

background-origin: padding-box|border-box|content-box;

跟上面的一樣。（padding-box爲默認值,上面也是，忘掉了)

background-size 屬性規定背景圖像的尺寸。語法是

background-size: length|percentage|cover|contain;

有幾個新詞percentage就是%按照圖片自身的大小的百分比設定。cover表示把圖像擴展到足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。contain把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域（也許不比自身的大）。length有兩個值，第一個爲width，第二個是height，只選擇第一個值，第二個會默認爲auto。

CSS3文本效果

CSS3有很多這個效果來着，不過好像很多主流瀏覽器都不支持。所以我也沒法看到。我只看一看可以在火狐瀏覽器中可以使用的。

text-overflow 屬性規定當文本溢出包含元素時發生的事情。語法

text-overflow: clip|ellipsis|string;

修建文本|顯示省略符號來代表被修剪的文本|使用給定的字符串來代表被修剪的文本。

clip直接了當啊，直接看不見了就完了，文字顯示一半，也不管。

ellipsis是用...代替了。這裏要說明的是overflow屬性的值應該是hidden。要不然就直接顯示了的。

text-shadow 屬性向文本設置陰影。語法

text-shadow: h-shadow v-shadow blur color;

這裏在背景圖片的陰影中都提到了。

text-wrap 屬性規定文本的換行（折行）規則。默認值normal，語法：

text-wrap: normal|none|unrestricted|suppress;

只在允許的換行點進行換行（什麼是允許的換行點？）|不換行（即使會溢出）|在任意的兩個字符間換行|壓縮元素中的換行。瀏覽器只在行中沒有其他有效換行點時進行換行。
不懂，因爲大多數瀏覽器都不支持。