文本陰影屬性
-
text-shadow
-
說明：水平、垂直陰影的位置允許負值
可進行多陰影設置(逗號分隔的方式)
text-shadow:x軸位置 y軸位置 模糊度 顏色;
文本換行
-
Word-wrap
屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是爲了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。 屬性值： normal 說明：只在允許的斷字點換行（瀏覽器保持默認處理） break-word 說明：屬性允許長單詞或 URL 地址換行到下一行 -
Word-break
屬性值： break-all 說明：它斷句的方式非常粗暴，它不會嘗試把長單詞挪到下一行，而是直接進行單詞內的斷句 Keep-all 說明：文本不會換行，只能在半角空格或連字符處換行
@font-face
@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，我們在Web的開發中使用字體不怕只能使用Web安全字體（@font-face這個功能早在IE4就支持）
@font-face的語法規則:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][, []]*;
[font-weight: <weight>];
[font-style: <style>];
}
背景屬性
Background-origin 背景原點（背景的起始點）
說明：指定background-origin屬性應該是相對位置
屬性值
padding-box 背景圖像填充框的相對位置
border-box 背景圖像邊界框的相對位置
content-box 背景圖像的相對位置的內容框 默認值
Background-clip 背景裁切
說明：background-clip 屬性規定背景的繪製區域。
屬性值
border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內邊距框。
content-box 背景被裁剪到內容框。 默認值
Background-size 背景尺寸
說明：background-size 規定背景圖像的尺寸
屬性值
length (10px)
規定背景圖的大小。第一個值寬度，第二個值高度。
Percentage(%)
以百分比爲值設置背景圖大小
cover
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域
contain
把圖像圖像擴展至最大尺寸，以使其寬度或高度完全適應內容區域。
css3多背景圖的設置
eg：background:url(),url()
顏色模式
1、rgba 顏色模式
2、 Hsl 顏色模式（瞭解）
3、 Hsla 顏色模式（瞭解）
就是色調(Hue)、飽和度(Saturation)、亮度(Lightness)三個顏色通道的改變以及它們相互之間的疊加來獲得各種顏色，色調(Hue)色調最大值360，飽和度和亮度有百分比表示0-100%之間。
圖片邊框
圖片邊框
border-image 屬性是一個簡寫屬性，用於設置以下屬性:
border-image-source 用在邊框的圖片的路徑。
border-image-slice 圖片邊框向內偏移(不加單位)。
border-image-repeat 圖像邊框是否應平鋪(repeat)、鋪滿(round)或拉伸(stretch)
border-image-outset 邊框圖像區域超出邊框的量(值是一個倍數)
CSS圓角
Border-radius
- border-radius: 5px 10px 20px 50px
- border-radius: 2em/1em
- border-radius:10px 20px 30px 40px/40px 30px 20px 10px
盒子陰影
box-shadow 盒子陰影
h-shadow 必需的。水平陰影的位置。允許負值
v-shadow 必需的。垂直陰影的位置。允許負值
blur 可選。模糊距離
spread 可選。陰影的大小
color 可選。陰影的顏色。
inset 可選。從外層的陰影（開始時）改變陰影內側陰影
box-shadow: 10px 10px 5px 10px #888888 inset;
- box-shadow: 10px 10px 5px 10px #888888 inset;
width的屬性值
width的屬性值
fill-available、fit-content、max-content、min-content
css3 calc()方法詳解
什麼是calc()?
學習calc()之前，我們有必要先知道calc()是什麼？只有知道了他是個什麼東東？在實際運用中更好的使用他。
calc()從字面我們可以把他理解爲一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。爲何說是動態值呢?因爲我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體佈局上，可以通過calc()計算得到元素的寬度。
calc()能做什麼？
calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。
calc()語法
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：
.elm {
width: calc(expression);
}
其中"expression"是一個表達式，用來計算長度的表達式。
calc()的運算規則
calc()使用通用的數學運算規則，但是也提供更智能的功能：
使用“+”、“-”、“*” 和 “/”四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算；
表達式中有“+”和“-”時，其前後必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
表達式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。
瀏覽器的兼容性
瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有“firefox for android 14.0”支持，其他的全軍覆沒。
大家在實際使用時，同樣需要添加瀏覽器的前綴
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
pointer-events：
阻止用戶的點擊動作產生任何效果
阻止缺省鼠標指針的顯示
阻止CSS裏的 hover 和 active 狀態的變化觸發事件
阻止JavaScript點擊動作觸發的事件
提交頁面，提交按鈕點擊後，添加這個樣式屬性（style="pointer-events"），來防止重複提交。
一些層的絕對定位，覆蓋按鈕，穿透可以點擊它。