徹底掌握CSS3
1.CSS3新增選擇器
2.CSS屬性劃分和前綴標準寫法順序
CSS3 被劃分爲模塊,其中最重要的 CSS3 模塊包括
- 選擇器
- 框模型
- 背景和邊框
- 文本效果
- 2D/3D 轉換
- 動畫
- 多列布局
- 用戶界面
CSS3屬性前綴和標準寫法順序
- Trident內核:前綴爲-ms ,主要代表爲IE瀏覽器
- Gecko內核:前綴爲-moz,主要代表爲Firefox
- Presto內核:前綴爲-o,主要代表爲Opera
- Webkit內核:前綴爲-webkit,產要代表爲Chrome和Safari
3.CSS3常用屬性之border-radius圓角
設置或檢索對象使用圓角邊框
- 提供2個參數,2個參數以“/”分隔,每個參數允許設置1~4個參數值,第1個參數表示水平半徑,第2個參數表示垂直半徑,如第2個參數省略,則默認等於第1個參數
- 水平半徑:如果提供全部四個參數值,將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用於四個角。
- 垂直半徑也遵循以上4點。
取值情況
- 四個值: 第一個值爲左上角,第二個值爲右上角,第三個值爲右下角,第四個值爲左下角。
- 三個值: 第一個值爲左上角, 第二個值爲右上角和左下角,第三個值爲右下角
- 兩個值: 第一個值爲左上角與右下角,第二個值爲右上角與左下角
- 一個值: 四個圓角值相同
4.CSS3常用屬性之box-shadow盒子陰影
設置或檢索對象陰影
- none: 無陰影
- length ①: 第1個長度值用來設置對象的陰影水平偏移值。可以爲負值
- length ②: 第2個長度值用來設置對象的陰影垂直偏移值。可以爲負值
- length ③: 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
- length ④: 如果提供了第4個長度值則用來設置對象的陰影外延值。可以爲負值
- color: 設置對象的陰影的顏色。
- inset: 設置對象的陰影類型爲內陰影。該值爲空時,則對象的陰影類型爲外陰影
5.CSS3常用屬性之text-shadow文字陰影
設置或檢索對象中文本的文字是否有陰影及模糊效果
- none: 無陰影
- length ①: 第1個長度值用來設置對象的陰影水平偏移值。可以爲負值
- length ②: 第2個長度值用來設置對象的陰影垂直偏移值。可以爲負值
- length ③: 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
- color : 設置對象的陰影的顏色
5.CSS3常用屬性之linear-gradient線性漸變
語法: 可以使用角度或者關鍵字;
- background: linear-gradient(direction, color-stop1, color-stop2, …)
- background: linear-gradient(angle, color-stop1, color-stop2);
6.CSS3常用屬性之背景新增屬性
background-origin屬性的詳解
- 設置或檢索對象的背景圖像計算 background-position 時的參考原點(位置)
- padding-box: 從padding區域(含padding)開始顯示背景圖像。
- border-box: 從border區域(含border)開始顯示背景圖像。
- content-box: 從content區域開始顯示背景圖像。
background-clip屬性的詳解
- 指定對象的背景圖像向外裁剪的區域
- padding-box: 從padding區域(不含padding)開始向外裁剪背景。
- border-box: 從border區域(不含border)開始向外裁剪背景。
- content-box: 從content區域開始向外裁剪背景。
- text: 從前景內容的形狀(比如文字)作爲裁剪區域向外裁剪,如此即可實現使用背景作爲填充色之類的遮罩效果
p{width:200px;height:200px;margin:0;padding:20px;border:10px dashed #666;
background:#aaa url(img.jpg) no-repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;font-weight:bold;font-size:120px;}
<p>從前景內容的形狀作爲裁剪區域向外裁剪背景</p>
background-size屬性的詳解
- 檢索或設置對象的背景圖像的尺寸大小。
- 該屬性提供2個參數值(特性值cover和contain除外)。
- 如果提供兩個,第一個用於定義背景圖像的寬度,第二個用於定義背景圖像的高度。
- 如果只提供一個,該值將用於定義背景圖像的寬度,第2個值默認爲auto,即高度爲auto,此時背景圖以提供的寬度作爲參照來進行等比縮放。
取值:
- length:用長度值指定背景圖像大小。不允許負值。
- percentage:用百分比指定背景圖像大小。不允許負值。
- auto: 背景圖像的真實大小。
- cover: 將背景圖像等比縮放到完全覆蓋容器,背景圖像有可能超出容器。
- contain: 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等,背景圖像始終被包含在容器內。