知識點記錄：1、圓角效果 border-radius
如：border-radius:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */
2、陰影 box-shadow
如：box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];
box-shadow:4px 2px 6px #333333;
box-shadow:4px 2px 6px #333333 inset;
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33cc00 inset;
3、為邊框應用 border-image
如：background:url(xx.jpg) 10px 20px no-repeat;
4、顏色之rgba
如：color：rgba(r,g,b,a)
5、漸變色彩
如：background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
6、text-overflow與word-wrap
text-overflow用來設定是否使用乙個省略標記（...）標示地想內文字的溢位。
語法：text-overflow: clip|ellipsis
但是text-overflow只是用來說明文字溢位時用什麼方式顯示，要實現溢位時產生省略號的效果，
還須定義強制文字在一行內顯示（white-space:nowrap)及溢位內容為隱藏（overflow:hidden)，
只有這樣才能實現溢位文字顯示省略號的效果，**如下：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
word-wrap也可以用來設定文字行為，當前行超過指定容器的邊界時是否斷開轉行。
語法：word-wrap:normal|break-word
normal 表示控制連續文字換行；break-word表示內容將在邊界內換行
normal為瀏覽器預設值，break-word設定在長單詞或url位址內部進行換行，此屬性不常用，
用瀏覽器預設值即可。
7、嵌入字型@font-face
@font-face能夠載入伺服器端的字型檔案，讓瀏覽器端可以顯示使用者電腦裡沒有安裝的字型。
語法：@font-face
比如： p
8、文字陰影text-shadow
text-shadow可以用來設定文字的陰影效果。
語法：text-shadow: x-offset y-offset blur color;
其中：blur指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影
越清晰，如果不需要陰影模糊可以將blur設定為0。
如：text-shadow: 0 1px 1px #fff;
9、background-origin
設定元素背景的原始起始位置。
語法：background-origin: border-box | padding-box | content-box;
引數分別表示背景是從邊框，還是內邊距（預設值），或者是內容區域開始顯示。
需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。
10、background-clip
用來將背景做適當的裁剪以適應實際需要。
語法：background-clip: border-box | padding-box | content-box | no-clip
引數分別表示從邊框、或內填充、或者內容區域向外裁剪背景。no-clip表示不裁切，和
引數border-box顯示同樣的效果。background-clip預設值為border-box。
11、background-size
設定背景的大小，以長度值或百分比顯示，還可以通過cover和contain來對進行伸縮
語法：background-size: auto | 《長度值》 | 《百分比》 | cover | contain
取值說明：
1、auto：預設值，不改變背景的原始高度和寬度；
2、《長度值》：成對出現如200px 50px，將背景寬高依次設定為前面兩個值，當設定乙個值時，將其作為寬度值來等比縮放；
3、《百分比》：0％~100％之間的任何值，將背景寬高依次設定為所在元素寬高乘以前面百分比得出的數值，當設定乙個值時同上；
4、cover：顧名思義為覆蓋，即將背景等比縮放以填滿整個容器；
5、contain：容納，即將背景等比縮放至某一邊緊貼容器邊緣為止。
12、multiple backgrounds
多重背景，也就是css2裡background的屬性外加origin、clip和size組成的新background的多次
疊加，縮寫時為用逗號隔開的每組值；用分解寫法時，如果有多個背景，而其他屬性只有乙個（
例如background-repeat只有乙個），表明所有背景應用該屬性值。
語法縮寫如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
eg-1：
background-image: url(
url(
url(
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;
eg-2:
background:url( 0 0 / 75% 50% no-repeat,
url( right bottom / 50% 45% no-repeat;
css3基本介紹2
css3 文字效果 css3 包含多個新的文字特性。在本章中，您將學到如下文字屬性 text shadow word wrapcss3 文字陰影 在 css3 中，text shadow 可向文字應用陰影。css3 自動換行 p hanging punctuation 規定標點字元是否位於線框之外。...
css3選擇器基本介紹
這些選擇器還是比較簡單的,就不再此一一舉例樣式了.還有隨著各種瀏覽器的公升級,也不在此討論各種版本的瀏覽器對於屬性樣式的相容和支援問題久了.一 屬性選擇器 a程式設計客棧ttr val 屬性attr是val at程式設計客棧tr val 屬性attr中包含val attr val 屬性attr中開頭...
CSS 3動畫介紹
原文 a beginner s introduction to css animation 譯文 乙個初學者對css動畫的介紹 譯者 dwqs 在這篇文章，我將向你介紹css動畫，隨著瀏覽器對動畫支援的改善，一種高效率的做事方式變得越來越流行。考慮到基礎知識，我將快速建立乙個從正方形變成圓形的動畫案...