CSS3筆記-加強版
阿新 • • 發佈：2017-07-22
正序 識別 etc before nor ipo ask 區分大小寫 direction 屬性選擇器:
E[attr]只使用屬性名，但沒有確定任何屬性值
E[attr="value"]指定屬性名，並指定了該屬性的屬性值
E[attr~="value"]指定屬性名，並且具有屬性值，此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“?”不能不寫
E[attr^="value"]指定了屬性名，並且有屬性值，屬性值是以value開頭的
E[attr$="value"]指定了屬性名，並且有屬性值，而且屬性值是以value結束的
E[attr*="value"]指定了屬性名，並且有屬性值，而且屬值中包含了value
E[attr|="value"]指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）
彈性盒模型：
註意在使用彈性盒模型的時候
父元素必須要加display:box 或 display:inline-box
box-orient 定義盒模型的布局方向:
參數：
horizontal 水平顯示
vertical 垂直方向
box-direction 元素排列順序:
參數：
normal 正序
reverse 反序
box-ordinal-group (數字，1最先)設置元素的具體位置
box-flex 定義盒子的彈性空間：
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和
.box div:nth-of-type(1){-webkit-box-flex:1;}
.box div:nth-of-type(2){-webkit-box-flex:3;} // 分成四份，第一個占1份，第二個占3份
box-pack 對盒子富裕(空白無元素)的空間進行管理：
參數：
start 所有子元素在盒子左側顯示，富裕空間在右側
end 所有子元素在盒子右側顯示，富裕空間在左側
center 所有子元素居中
justify 富余空間在子元素之間平均分布
box-align 在垂直方向上對元素的位置進行管理：
參數：
star 所有子元素在居頂
end 所有子元素在居底
center 所有子元素垂直居中
盒模型陰影：
box-shadow:[inset] x y blur [spread] color
參數：
[inset]：可選，投影方式，inset：內投影；默認：外投影。
x、y：陰影偏移
blur：模糊半徑
spread：擴展陰影半徑。先擴展原有形狀，再開始畫陰影
color：顏色
box-reflect 倒影：
參數：
direction 方向 above|below|left|right;
距離
漸變（可選）-webkit-linear-gradient(red 0,blue 100%)
resize 自由縮放：
參數：
both 水平垂直都可以縮放
horizontal 只有水平方向可以縮放
vertical 只有垂直方向可以縮放
註意：一定要配合overflow:auto 一塊使用
怪異盒子：
box-sizing 盒模型解析模式
content-box 標準盒模型 width/height=border+padding+content
corder-box 怪異盒模型 width/height=content
css3分欄布局:
column-width 每一欄目的寬度
column-count 欄目的列數
column-gap 欄目相隔的距離
column-rule 欄目的間隔線
css3響應式布局:
媒體類型
all 所有媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection 打印預覽
screen 彩屏設備
speech ‘聽覺‘類似的媒體類型
tty 不適用像素的設備
tv 電視
關鍵字
and
not not關鍵字是用來排除某種制定的媒體類型
only only用來定某種特定的媒體類型
媒體特性
(max-width:600px)
(max-device-width: 480px) 設備輸出寬度
(orientation:portrait) 豎屏
(orientation:landscape) 橫屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 設備像素比 window.devicePixelRatio = 物理像素 / dips
樣式引入
外部引入css寫法：
橫屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
豎屏
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">
屏幕大於800px時：
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 800px)">
屏幕大於600px小於800px時：
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
屏幕小於600px時：
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (max-width: 600px)">
頁面內style樣式寫法：
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}
為移動設備添加 viewport：
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
content 參數：
width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
移動端的頭部標簽和meta大全：
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 -->
<html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head>
<!-- 聲明文檔使用的字符編碼 -->
<meta charset=‘utf-8‘>
<!-- 優先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 頁面描述 -->
<meta name="description" content="不超過150個字符"/>
<!-- 頁面關鍵詞 -->
<meta name="keywords" content=""/>
<!-- 網頁作者 -->
<meta name="author" content="name, [email protected]"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 為移動設備添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 會導致 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 設備 begin -->
<meta name="apple-mobile-web-app-title" content="標題">
<!-- 添加到主屏後的標題（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 設置蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 圖標 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默認 57x57 像素，必須有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以沒有，但推薦有 -->
<!-- iOS 圖標 end -->
<!-- iOS 啟動畫面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 豎屏 768 x 1004（標準分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 豎屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 橫屏 1024x748（標準分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 橫屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
<!-- iOS 啟動畫面 end -->
<!-- iOS 設備 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁貼圖標 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 訂閱 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<title>標題</title>
</head>
圓角： border-radius: 1-4個數字 / 1-4個數字 前面是水平，後面是垂直 不給“/”則水平和垂直一樣 border-radius: 10px/5px; 類似橢圓 參數個數： 用法 1個：都一樣 border-radius: 一樣 2個：對角 border-radius: 左上&右下 右上&左下 3個：斜對角 border-radius: 左上 右上&左下 右下 4個：全部，順時針 border-radius: 左上 右上 右下 左下 邊框： 邊框圖片 border-image border-image-sourceg 引入圖片 border-image-slice 切割圖片 border-image-width 邊框寬度 border-image-repeat 圖片的排列方式 round 平鋪,repeat 重復,stretch拉伸 邊框顏色 border-colors 線性漸變: 線性漸變格式： linear-gradient([<起點> || <角度>,]? <點>, <點>…) linear-gradient(60deg,red 0,blue 50%,green 100%)//由紅漸變到藍再漸變到綠 repeating-linear-gradient：平鋪 參數 ： 起點：從什麽方向開始漸變 left、top、left top 默認：top。 角度：從什麽角度開始漸變 xxx deg的形式 點：漸變點的顏色和位置 black 50%，位置可選 加入<點>的位置： top, red 40%, green 60% top, red 50%, green 50% 同一個位置兩個點——直接跳變 也可以用px 配合rgba： top, rgba(255,255,255,1), rgba(255,255,255,0) 加入背景圖片： background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif) 只能用在背景上： IE：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘,endColorstr=‘#ff0000‘,GradientType=‘1‘); 徑向漸變： radial-gradient([<起點>]? [<形狀> || <大小>,]? <點>, <點>…); 起點：可以是關鍵字（left,top,right,bottom），具體數值或百分比 形狀： ellipse、circle 大小 :具體數值或百分比，也可以是關鍵字（最近端，最近角，最遠端，最遠角，包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）; 註意firefox目前只支持關鍵字 背景： 多背景，逗號分開： background: url(a.jpg) 0 0, url(b.jpg) 0 100%; 背景尺寸： background-size:x y background-size:100% 100% cover 放大 contain 縮小 background-origin ： border | padding | content border-box： 從border區域開始顯示背景。 padding-box： 從padding區域開始顯示背景。 content-box： 從content區域開始顯示背景。 background-clip border： 從border區域向外裁剪背景。 padding： 從padding區域向外裁剪背景。 content： 從content區域向外裁剪背景。 no-clip： 從border區域向外裁剪背景。 text: 除了設置透明文字的部分，其余部分都已經被裁減掉 遮罩： mask-image mask-position mask-repeat 實例：特殊形狀的幻燈片效果
w3c標準： -ms-transform:translate(100px,100px); //-ms代表IE內核識別碼（360屬於IE內核） -moz-transform:translate(100px,100px);//-moz代表火狐【Firefox】內核識別碼 -webkit-transform:translate(100px,100px); //-webkit代表谷歌【Chrome】和蘋果【safari】內核識別碼 -o-transform:translate(100px,100px); //-o代表歐朋【opera】內核識別碼 transform:translate(100px,100px); //統一標識語句 transition過渡:
參數：
transition-property 要運動的樣式 （all || [attr] || none）
transition-duration 運動時間
transition-delay 延遲時間
transition-timing-function 運動形式
ease：（逐漸變慢）默認值
linear：（勻速）
ease-in：(加速)
ease-out：（減速）
ease-in-out：（先加速後減速）
cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/
例如：寬度在1s變寬，接著高度在2s變高，接著背景顏色改變（高度延遲了1s，這一秒鐘寬度正在變化）
.box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;}
.box:hover{width:500px;height:300px;background:blue;}
過渡完成事件 ：
Webkit內核： obj.addEventListener(‘WebkitTransitionEnd‘,function(){},false);
firefox: obj.addEventListener(‘transitionend‘,function(){},false);
添加過渡完成事件：在transition完成之後觸發
function addEnd(obj,fn)
{
obj.addEventListener(‘WebkitTransitionEnd‘,fn,false);
obj.addEventListener(‘transitionend‘,fn,false);
}
移除過渡完成事件：
function removeEnd(obj,fn)
{
obj.removeEventListener(‘WebkitTransitionEnd‘,fn,false);
obj.removeEventListener(‘transitionend‘,fn,false);
}
2D變換 transform：
rotate() 旋轉函數 取值度數 （deg）
transform-origin 旋轉的基點，改變元素 x 和 y 軸，默認是center中心點。
skew() 傾斜函數 取值度數
skewX()
skewY()
scale() 縮放函數 取值 正數、負數和小數
scaleX()
scaleY()
translate() 位移函數
translateX()
translateY()
transform 執行順序問題：後寫的變換先執行
matrix(a,b,c,d,e,f) 矩陣函數 默認：matrix(1,0,0,1,0,0) 通過矩陣實現縮放 x軸縮放 a=x*a c=x*c e=x*e; y軸縮放 b=y*b d=y*d f=y*f; 通過矩陣實現位移 x軸位移: e=e+x y軸位移: f=f+y 通過矩陣實現傾斜 x軸傾斜: c=Math.tan(xDeg/180*Math.PI) y軸傾斜: b=Math.tan(yDeg/180*Math.PI) 通過矩陣實現旋轉 a=Math.cos(deg/180*Math.PI); b=Math.sin(deg/180*Math.PI); c=-Math.sin(deg/180*Math.PI); d=Math.cos(deg/180*Math.PI); 變換兼容IE9以下IE版本只能通過矩陣來實現： filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod=‘auto expand‘); IE下的矩陣沒有E和F兩個參數 M11==a; M12==c; M21==b; M22==d
3D變換： transform-style：preserve-3d 給父級添加，建立3D空間 perspective：100px; 景深,離變換元素的垂直距離為100px perspective- origin 景深基點,觀察的角度，默認是center transform 新增函數 rotateX() rotateY() rotateZ() translateZ() scaleZ() animation： 1、animate——關鍵幀： 關鍵幀——keyframes 類似於flash 只需指明兩個狀態，之間的過程由計算機自動計算 關鍵幀的時間單位 數字：0%、25%、100%等； 字符：from(0%)、to(100%)；可以只有to 格式 @keyframes 動畫名稱 { 動畫狀態 } 2、animate——調用動畫 調用的標簽(#div1、xxx:hover之類的) eg：調用.box元素在4s內以無限次、勻速、一正一倒序執行domove動畫 .box{-webkit-animation:4s domove infinite linear alternate;} 必要屬性: animation-name 動畫名稱（關鍵幀名稱） animation-duration 動畫持續時間 例如： -webkit-animation:miaov 4s; -webkit-animation-name: ‘miaov‘; -webkit-animation-duration: 4s; 可選屬性: animation-play-state 播放狀態（ running 播放 和paused 暫停 ） animation-timing-function動畫運動形式： linear 勻速。 ease 緩沖。 ease-in 由慢到快。 ease-out 由快到慢。 ease-in-out 由慢到快再到慢。 cubic-bezier(number, number, number, number) 特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內 animation-delay動畫延遲 只是第一次 animation-iteration-count重復次數： infinite為無限次 animation-direction 播放前重置： 動畫是否重置後再開始播放 alternate 動畫直接從上一次停止的位置開始執行 normal 動畫第二次直接跳到0%的狀態開始執行 3、animate——和JS結合 通過class: 在class裏加入animation的各種屬性 直接給元素加-webkit-animation-xxx樣式 animation的問題: 寫起來麻煩 沒法動態改變目標點位置 動畫end事件： obj.addEventListener(‘webkitAnimationEnd‘, function (){}, false); obj.addEventListener(‘animationend‘, function (){}, false);
彈性盒模型：
註意在使用彈性盒模型的時候
父元素必須要加display:box 或 display:inline-box
box-orient 定義盒模型的布局方向:
參數：
horizontal 水平顯示
vertical 垂直方向
box-direction 元素排列順序:
參數：
normal 正序
reverse 反序
box-ordinal-group (數字，1最先)設置元素的具體位置
box-flex 定義盒子的彈性空間：
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和
.box div:nth-of-type(1){-webkit-box-flex:1;}
.box div:nth-of-type(2){-webkit-box-flex:3;} // 分成四份，第一個占1份，第二個占3份
box-pack 對盒子富裕(空白無元素)的空間進行管理：
參數：
start 所有子元素在盒子左側顯示，富裕空間在右側
end 所有子元素在盒子右側顯示，富裕空間在左側
center 所有子元素居中
justify 富余空間在子元素之間平均分布
box-align 在垂直方向上對元素的位置進行管理：
參數：
star 所有子元素在居頂
end 所有子元素在居底
center 所有子元素垂直居中
盒模型陰影：
box-shadow:[inset] x y blur [spread] color
參數：
[inset]：可選，投影方式，inset：內投影；默認：外投影。
x、y：陰影偏移
blur：模糊半徑
spread：擴展陰影半徑。先擴展原有形狀，再開始畫陰影
color：顏色
box-reflect 倒影：
參數：
direction 方向 above|below|left|right;
距離
漸變（可選）-webkit-linear-gradient(red 0,blue 100%)
resize 自由縮放：
參數：
both 水平垂直都可以縮放
horizontal 只有水平方向可以縮放
vertical 只有垂直方向可以縮放
註意：一定要配合overflow:auto 一塊使用
怪異盒子：
box-sizing 盒模型解析模式
content-box 標準盒模型 width/height=border+padding+content
corder-box 怪異盒模型 width/height=content
css3分欄布局:
column-width 每一欄目的寬度
column-count 欄目的列數
column-gap 欄目相隔的距離
column-rule 欄目的間隔線
css3響應式布局:
媒體類型
all 所有媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection 打印預覽
screen 彩屏設備
speech ‘聽覺‘類似的媒體類型
tty 不適用像素的設備
tv 電視
關鍵字
and
not not關鍵字是用來排除某種制定的媒體類型
only only用來定某種特定的媒體類型
媒體特性
(max-width:600px)
(max-device-width: 480px) 設備輸出寬度
(orientation:portrait) 豎屏
(orientation:landscape) 橫屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 設備像素比 window.devicePixelRatio = 物理像素 / dips
樣式引入
外部引入css寫法：
橫屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
豎屏
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">
屏幕大於800px時：
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 800px)">
屏幕大於600px小於800px時：
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
屏幕小於600px時：
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (max-width: 600px)">
頁面內style樣式寫法：
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}
為移動設備添加 viewport：
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
content 參數：
width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
移動端的頭部標簽和meta大全：
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 -->
<html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head>
<!-- 聲明文檔使用的字符編碼 -->
<meta charset=‘utf-8‘>
<!-- 優先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 頁面描述 -->
<meta name="description" content="不超過150個字符"/>
<!-- 頁面關鍵詞 -->
<meta name="keywords" content=""/>
<!-- 網頁作者 -->
<meta name="author" content="name, [email protected]"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 為移動設備添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 會導致 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 設備 begin -->
<meta name="apple-mobile-web-app-title" content="標題">
<!-- 添加到主屏後的標題（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 設置蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 圖標 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默認 57x57 像素，必須有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以沒有，但推薦有 -->
<!-- iOS 圖標 end -->
<!-- iOS 啟動畫面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 豎屏 768 x 1004（標準分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 豎屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 橫屏 1024x748（標準分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 橫屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
<!-- iOS 啟動畫面 end -->
<!-- iOS 設備 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁貼圖標 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 訂閱 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<title>標題</title>
</head>
圓角： border-radius: 1-4個數字 / 1-4個數字 前面是水平，後面是垂直 不給“/”則水平和垂直一樣 border-radius: 10px/5px; 類似橢圓 參數個數： 用法 1個：都一樣 border-radius: 一樣 2個：對角 border-radius: 左上&右下 右上&左下 3個：斜對角 border-radius: 左上 右上&左下 右下 4個：全部，順時針 border-radius: 左上 右上 右下 左下 邊框： 邊框圖片 border-image border-image-sourceg 引入圖片 border-image-slice 切割圖片 border-image-width 邊框寬度 border-image-repeat 圖片的排列方式 round 平鋪,repeat 重復,stretch拉伸 邊框顏色 border-colors 線性漸變: 線性漸變格式： linear-gradient([<起點> || <角度>,]? <點>, <點>…) linear-gradient(60deg,red 0,blue 50%,green 100%)//由紅漸變到藍再漸變到綠 repeating-linear-gradient：平鋪 參數 ： 起點：從什麽方向開始漸變 left、top、left top 默認：top。 角度：從什麽角度開始漸變 xxx deg的形式 點：漸變點的顏色和位置 black 50%，位置可選 加入<點>的位置： top, red 40%, green 60% top, red 50%, green 50% 同一個位置兩個點——直接跳變 也可以用px 配合rgba： top, rgba(255,255,255,1), rgba(255,255,255,0) 加入背景圖片： background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif) 只能用在背景上： IE：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘,endColorstr=‘#ff0000‘,GradientType=‘1‘); 徑向漸變： radial-gradient([<起點>]? [<形狀> || <大小>,]? <點>, <點>…); 起點：可以是關鍵字（left,top,right,bottom），具體數值或百分比 形狀： ellipse、circle 大小 :具體數值或百分比，也可以是關鍵字（最近端，最近角，最遠端，最遠角，包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）; 註意firefox目前只支持關鍵字 背景： 多背景，逗號分開： background: url(a.jpg) 0 0, url(b.jpg) 0 100%; 背景尺寸： background-size:x y background-size:100% 100% cover 放大 contain 縮小 background-origin ： border | padding | content border-box： 從border區域開始顯示背景。 padding-box： 從padding區域開始顯示背景。 content-box： 從content區域開始顯示背景。 background-clip border： 從border區域向外裁剪背景。 padding： 從padding區域向外裁剪背景。 content： 從content區域向外裁剪背景。 no-clip： 從border區域向外裁剪背景。 text: 除了設置透明文字的部分，其余部分都已經被裁減掉 遮罩： mask-image mask-position mask-repeat 實例：特殊形狀的幻燈片效果
w3c標準： -ms-transform:translate(100px,100px); //-ms代表IE內核識別碼（360屬於IE內核） -moz-transform:translate(100px,100px);//-moz代表火狐【Firefox】內核識別碼 -webkit-transform:translate(100px,100px); //-webkit代表谷歌【Chrome】和蘋果【safari】內核識別碼 -o-transform:translate(100px,100px); //-o代表歐朋【opera】內核識別碼 transform:translate(100px,100px); //統一標識語句 transition過渡:
參數：
transition-property 要運動的樣式 （all || [attr] || none）
transition-duration 運動時間
transition-delay 延遲時間
transition-timing-function 運動形式
ease：（逐漸變慢）默認值
linear：（勻速）
ease-in：(加速)
ease-out：（減速）
ease-in-out：（先加速後減速）
cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/
例如：寬度在1s變寬，接著高度在2s變高，接著背景顏色改變（高度延遲了1s，這一秒鐘寬度正在變化）
.box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;}
.box:hover{width:500px;height:300px;background:blue;}
過渡完成事件 ：
Webkit內核： obj.addEventListener(‘WebkitTransitionEnd‘,function(){},false);
firefox: obj.addEventListener(‘transitionend‘,function(){},false);
添加過渡完成事件：在transition完成之後觸發
function addEnd(obj,fn)
{
obj.addEventListener(‘WebkitTransitionEnd‘,fn,false);
obj.addEventListener(‘transitionend‘,fn,false);
}
移除過渡完成事件：
function removeEnd(obj,fn)
{
obj.removeEventListener(‘WebkitTransitionEnd‘,fn,false);
obj.removeEventListener(‘transitionend‘,fn,false);
}
2D變換 transform：
rotate() 旋轉函數 取值度數 （deg）
transform-origin 旋轉的基點，改變元素 x 和 y 軸，默認是center中心點。
skew() 傾斜函數 取值度數
skewX()
skewY()
scale() 縮放函數 取值 正數、負數和小數
scaleX()
scaleY()
translate() 位移函數
translateX()
translateY()
transform 執行順序問題：後寫的變換先執行
matrix(a,b,c,d,e,f) 矩陣函數 默認：matrix(1,0,0,1,0,0) 通過矩陣實現縮放 x軸縮放 a=x*a c=x*c e=x*e; y軸縮放 b=y*b d=y*d f=y*f; 通過矩陣實現位移 x軸位移: e=e+x y軸位移: f=f+y 通過矩陣實現傾斜 x軸傾斜: c=Math.tan(xDeg/180*Math.PI) y軸傾斜: b=Math.tan(yDeg/180*Math.PI) 通過矩陣實現旋轉 a=Math.cos(deg/180*Math.PI); b=Math.sin(deg/180*Math.PI); c=-Math.sin(deg/180*Math.PI); d=Math.cos(deg/180*Math.PI); 變換兼容IE9以下IE版本只能通過矩陣來實現： filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod=‘auto expand‘); IE下的矩陣沒有E和F兩個參數 M11==a; M12==c; M21==b; M22==d
3D變換： transform-style：preserve-3d 給父級添加，建立3D空間 perspective：100px; 景深,離變換元素的垂直距離為100px perspective- origin 景深基點,觀察的角度，默認是center transform 新增函數 rotateX() rotateY() rotateZ() translateZ() scaleZ() animation： 1、animate——關鍵幀： 關鍵幀——keyframes 類似於flash 只需指明兩個狀態，之間的過程由計算機自動計算 關鍵幀的時間單位 數字：0%、25%、100%等； 字符：from(0%)、to(100%)；可以只有to 格式 @keyframes 動畫名稱 { 動畫狀態 } 2、animate——調用動畫 調用的標簽(#div1、xxx:hover之類的) eg：調用.box元素在4s內以無限次、勻速、一正一倒序執行domove動畫 .box{-webkit-animation:4s domove infinite linear alternate;} 必要屬性: animation-name 動畫名稱（關鍵幀名稱） animation-duration 動畫持續時間 例如： -webkit-animation:miaov 4s; -webkit-animation-name: ‘miaov‘; -webkit-animation-duration: 4s; 可選屬性: animation-play-state 播放狀態（ running 播放 和paused 暫停 ） animation-timing-function動畫運動形式： linear 勻速。 ease 緩沖。 ease-in 由慢到快。 ease-out 由快到慢。 ease-in-out 由慢到快再到慢。 cubic-bezier(number, number, number, number) 特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內 animation-delay動畫延遲 只是第一次 animation-iteration-count重復次數： infinite為無限次 animation-direction 播放前重置： 動畫是否重置後再開始播放 alternate 動畫直接從上一次停止的位置開始執行 normal 動畫第二次直接跳到0%的狀態開始執行 3、animate——和JS結合 通過class: 在class裏加入animation的各種屬性 直接給元素加-webkit-animation-xxx樣式 animation的問題: 寫起來麻煩 沒法動態改變目標點位置 動畫end事件： obj.addEventListener(‘webkitAnimationEnd‘, function (){}, false); obj.addEventListener(‘animationend‘, function (){}, false);
CSS3筆記-加強版