css屬性

這是我看官方文檔收集整理的一些css屬性，分享一下

CSS屬性劃分和前綴標準寫法順序

CSS3 被劃分為模塊，其中最重要的 CSS3 模塊包括

選擇器

框模型

背景和邊框

文本效果

2D/3D 轉換

動畫

多列布局

用戶界面

CSS3屬性前綴和標準寫法順序

Trident內核：前綴為-ms ，主要代表為IE瀏覽器

Gecko內核：前綴為-moz，主要代表為Firefox

Presto內核：前綴為-o，主要代表為Opera

Webkit內核：前綴為-webkit，產要代表為Chrome和Safari

CSS3常用屬性之border-radius圓角

設置或檢索對象使用圓角邊框

提供2個參數，2個參數以“/”分隔，每個參數允許設置1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則默認等于第1個參數

水平半徑：如果提供全部四個參數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、e下左(bottom-left)的順序作用于四個角。

垂直半徑也遵循以上4點。

取值情況

四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。

三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角

兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角

一個值： 四個圓角值相同

CSS3常用屬性之box-shadow盒子陰影

設置或檢索對象陰影

none： 無陰影

length ①： 第1個長度值用來設置對象的陰影水平偏移值。可以為負值

length ②： 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值

length ③： 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值

length ④： 如果提供了第4個長度值則用來設置對象的陰影外延值。可以為負值

color： 設置對象的陰影的顏色。

inset： 設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影

CSS3常用屬性之text-shadow文字陰影

設置或檢索對象中文本的文字是否有陰影及模糊效果

none： 無陰影

length ①： 第1個長度值用來設置對象的陰影水平偏移值。可以為負值

length ②： 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值

length ③： 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值

color ： 設置對象的陰影的顏色

CSS3常用屬性之linear-gradient線性漸變

語法: 可以使用角度或者關鍵字；

background: linear-gradient(direction, color-stop1, color-stop2, …)

background: linear-gradient(angle, color-stop1, color-stop2);

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

從前景內容的形狀作為裁剪區域向外裁剪背景

background-size屬性的詳解

檢索或設置對象的背景圖像的尺寸大小。

該屬性提供2個參數值(特性值cover和contain除外)。

如果提供兩個，第一個用于定義背景圖像的寬度，第二個用于定義背景圖像的高度。

如果只提供一個，該值將用于定義背景圖像的寬度，第2個值默認為auto，即高度為auto，此時背景圖以提供的寬度作為參照來進行等比縮放。

取值：

length：用長度值指定背景圖像大小。不允許負值。

percentage：用百分比指定背景圖像大小。不允許負值。

auto： 背景圖像的真實大小。

cover： 將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。

contain： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。

CSS 容器

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。