CSS3筆記(包含css2)

三種使用方法:
1、行內式
<標籤名 style="屬性=屬性值···">內容</標籤名>
2、內嵌式
<style type="text/css">
選擇器:{
屬性:屬性值···
}
</style>
3、鏈入式
<link href="URL" type="text/css" rel="stylesheet">


優先級:id選擇器>類選擇器>標記選擇器>通配符選擇器


css文本相關樣式:
font-size 文字大小px
font-family 設置字體
font-weight 設置字體粗細
normal標準(400)
bold加粗(700)
bolder再加粗
lighter默認細字符
100-900數字越大越粗
font-style 設置字體樣式
normal標準
italic斜體
oblique傾斜
font-variant 設置字體變體
normal標準的
small-caps英文字體小型大寫字符


css排版樣式:
color 設置文本顏色
letter-spacing 設置字體間距
word-spacing 設置單詞間距
line-height 設置行高
height 設置元素的高度。
max-height 設置元素的最大高度。
max-width 設置元素的最大寬度。
min-height 設置元素的最小高度。
min-width 設置元素的最小寬度。
width 設置元素的寬度
text-transform 設置英文大小寫轉換
none不轉換
capitalize首字母變大
uppercase全部變大
lowercase全部變小
text-decoration 設置字體效果
none無效果
underline下劃線
overling上劃線
line-through刪除線
text-align 對齊方式
left左
center中
right右
text-indent 設置收首行縮進
em字符寬度倍數
px像素
%百分比
white-space 設置文本格式
normal默認顯示
pre按文檔書寫格式顯示
nowrap空格換行無效,內容超出增加滾動條，不自動換行


盒子模型
從外到裏 margin外邊框>border邊框>padding內邊距>內容
margin 外邊距
margin-top上外邊距
margin-right右外邊距
margin-bottom下外邊距
margin-left左外邊距
margin全外邊距
border 邊框
none沒有邊框
solid單實線
dashed虛線
dotted點線
double雙實現
border-top-style上邊框
border-right-style右邊框
border-bottom-style下邊框
border-left-style左邊框
border-style全邊框
border-top-width上邊框寬度
border-right-width右邊框寬度
border-bottom-width下邊框寬度
border-left-width左邊框寬度
border-width全邊框寬度
border-top-color上邊框顏色
border-right-color右邊框顏色
border-bottom-color下邊框顏色
border-left-color左邊框顏色
border-color全邊框顏色
border-top上邊框樣式
border-right右邊框樣式
border-bottom下邊框樣式
border-left左邊框樣式
border全邊框樣式
outline 輪廓
outline-color設置輪廓的顏色
color-name
hex-number
rgb-number
invert
inherit
outline-style設置輪廓的樣式
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width設置輪廓的寬度
thin
medium
thick
length
inherit
padding 內邊距
padding-top上內邊距
padding-right右內邊距
padding-bottom下內邊距
padding-left左內邊距
padding全內邊距


背景屬性
background-color 設置背景顏色
屬性名{background-image:url(URL)} 設置圖片爲背景
background-repeat 設置背景圖片模式
repeat沿水平、垂直方向平鋪
no-repeat不平埔
repeat-x只沿水平方向平鋪
repeat-y只沿垂直方向平鋪
background-position 設置圖片位置
background-attachment 設置固定方式
scroll隨頁面一起滾動(默認)
fixed不隨頁面滾動


塊標記獨佔一行,行內標記可共行
display 類型轉換
inline將標記顯示爲行內標記
block將標記顯示爲塊標記
inline-block將標記顯示爲行內標記，可對其設置高寬,但不會都、獨佔一行
none將此標記隱藏


列表
list-style-type 屬性
disc黑圓
circle圓
square黑矩形
decimal 1
upper-alpha A
lower-alpha a
upper-roman I
lower-roman i
none不顯示任何符號
list-style-image 用於列表之前的圖片，調用方式和背景一樣，通過url
list-style-position 項目符號的位置
inside位於列表文本內
outside位於列表文本外


超鏈接僞類
a:link 未訪問時樣式
a:visited 訪問後樣式
a:hover 觸碰樣式
a:active 單擊不動時樣式


css浮動
float 浮動方式
none不浮動
left左浮動
right右浮動
clear 清除浮動
left清除左浮動
right清除右浮動
both清除左右浮動
overflow-hidden 清除浮動對該元素的影響


定位
position 定位
static靜態定位
relative相對定位
absolute絕對定位
fixed固定位置
top向上偏移
bottom向下偏移
left向左偏移
right向右偏移

vertical-align 圖片對齊方式
auto根據layout-flow對象
sub豎直對齊文本的下標
super豎直對齊文本的上標
top支持valign的對象頂端對齊
text-top文本與支持valign對象頂端對齊
middle支持valign的對象中部對齊
bottom支持valign的對象底端對齊
text-bottom文本與支持valign對象底端對齊
length由浮點數字和單位標識符組成偏移量


僞元素
:link a:link 選擇所有未訪問鏈接
:visited a:visited 選擇所有訪問過的鏈接
:active a:active 選擇正在活動鏈接
:hover a:hover 把鼠標放在鏈接上的狀態
:focus input:focus 選擇元素輸入後具有焦點
:first-letter p:first-letter 選擇每個<p>元素的第一個字母
:first-line p:first-line 選擇每個<p>元素的第一行
:first-child p:first-child 選擇器匹配屬於任意元素的第一個子元素的 <]p> 元素
:before p:before 在每個<p>元素之前插入內容
:after p:after 在每個<p>元素之後插入內容
:lang(language) p:lang(it) 爲<p>元素的lang屬性選擇一個開始值


選擇器
[title=runoob]
{
    border:5px solid green;
}


css 濾鏡
支持濾鏡的元素有:body,button,div,img,input,marquee,span,table,td,tr,th,textarea,tfoot,th,thead
透明度濾鏡:
filter:Alpha(opacity=n,FinishOpacity=n,Style=n.StartX=n,StartY=n,FinishX=n,FinishY=n)
opacity透明度等級 完全透明0-100不透明
Style透明區域的形狀特徵 0統一形狀，1線性，2放射性，3長方形，
StartX-StartY開始座標
FinishX-FinishY結束座標


模糊濾鏡:
filter:Blur(Add=n,Direction=n,Strength=n)
add布爾判斷1(默認)或者0是否被改變成印象派的模糊效果
Direction設置模糊方向 默認爲向左270
Strength多少像素寬度受到模糊影響默認爲5


投射陰影濾鏡:
filter:DropShadow(Color=n,Offx=n,Offy=n,Positive=n)
Color設置陰影顏色
Offx x方向偏移量
Offy y方向偏移量
Positive布爾判斷1(默認)爲任何非透明像素建立可見投影或者0透明像素建立透明效果


對稱變換濾鏡
filter:FlipH||V
FlipH水平翻轉
FlipV垂直翻轉


光暈濾鏡
filter:Glow(Color=n,Strength=n)
Color發光顏色
Strength強度表現1~255任何整數指定


灰度濾鏡
filter:Gray


反色濾鏡
filter:Invert


遮罩濾鏡
filter:Mask（Color=n）
Color設置遮罩顏色


陰影濾鏡:
filter:Shadow(Color=n,Direction=n)
Color投射顏色
Direction投射方向


X射線濾鏡:
filter:Xray


波浪濾鏡
filter:Wave(Add=n,Freq=n,LightStrength=n,Phase=n,Strength=n)
add是否把對象按照波紋打亂
Freq頻率一個產生多少個波紋
LightStrength對波紋增強光影效果0-100
Phase設置正弦波的偏移量
Strength振幅


.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}


滾動條樣式屬性:
scrollbar-arrow-color:color    三角箭頭顏色
scrollbar-face-color:color 立體滾動條顏色
scrollbar-3dlight-color:color 立體滾動條亮變的顏色
scrollbar-highlight-color:color 滾動條高亮顏色
scrollbar-shadow-color:color 滾動條外陰影顏色
scrollbar-track-color:color 滾動條背景顏色
scrollbar-base-color:color 滾動條基色








css3.0 （兼容問題，可在屬性前加-webkit||-moz）


border-radius 圓角屬性(設置1—4個屬性)
border-radius 所有四個邊角 border-*-*-radius 屬性的縮寫
border-top-left-radius 定義了左上角的弧度
border-top-right-radius 定義了右上角的弧度
border-bottom-right-radius 定義了右下角的弧度
border-bottom-left-radius 定義了左下角的弧度

例子：
div{
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:300px;
border-radius:25px;
}
<div>border-radius 屬性允許您爲元素添加圓角邊框！ </div>






box-shadow 陰影(設置四個屬性加顏色)
例子:
div{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;(模糊效果5px)
}
<div></div>
例子:文字卡片
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}
div.container {
    padding: 10px;
}
<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>


  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>


例子:圖片卡片
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.container {
  padding: 10px;
}
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>


border-image 圖片邊框
例子:
div{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}


#stretch{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
<div id="round">這裏，圖像平鋪（重複）來填充該區域。</div>
<br>
<div id="stretch">這裏，圖像被拉伸以填充該區域。</div>





background-image 背景圖片
background-clip 規定背景的繪製區域。
#example1 {
    border: 10px dotted black;
    padding:35px;
    background: yellow; //全部有背景,也就是border-box
}
#example2 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box; //內邊距有背景
}
#example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box; //內容有背景
}


background-origin 規定背景圖片的定位區域。
content-box 背景圖像的相對位置的內容框
padding-box 背景圖像內邊框的相對位置
border-box 背景圖像邊界框的相對位置






background-size 規定背景圖片的尺寸。
div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;//可以百分比100% 100%背景完全填充
    background-repeat:no-repeat;
}



//不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的爲第一張。
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>


Gradients 漸變
Linear Gradients 線性漸變 向下/向上/向左/向右/對角方向
爲了創建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。
<div id="grad1"></div>
線性漸變 - 從上到下（默認情況下）
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 標準的語法（必須放在最後） */
}
線性漸變 - 從左到右
#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 標準的語法 */
}
線性漸變 - 對角
#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */
}
使用角度
background: linear-gradient(角度, 顏色1, 顏色2..(可使用多個));
換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。
透明度
#grad { //rgba前三者爲顏色,後者爲透明度
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標準的語法 */
}
重複的線性漸變
#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 標準的語法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}


Radial Gradients 徑向漸變 由它們的中心定義
<div id="grad1"></div>
顏色結點均勻分佈的徑向漸變
#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 標準的語法 */
}
顏色結點不均勻分佈的徑向漸變
#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法 */
}
形狀爲圓形的徑向漸變circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。
#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */
}
不同尺寸大小關鍵字的使用
closest-side
farthest-side
closest-corner
farthest-corner
#grad1 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* Opera 11.6 - 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* 標準的語法 */
  background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
 
#grad2 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Opera 11.6 - 12.0 */ 
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* 標準的語法 */
  background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
重複的徑向漸變
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
    background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 標準的語法（必須放在最後） */
}


CSS3 文本效果
text-shadow 文字陰影
  text-shadow: 5px 5px 5px #FF0000;


text-overflow 溢出屬性指定應向用戶如何顯示溢出內容
text-overflow:'ellipsis'(超出加...)
text-overflow:'clip'(超出切割)
"text-overflow:'>>';"(只在 Firefox 瀏覽器下有效)(超出切割)


word-wrap CSS3的換行(word-break 屬性不兼容 Opera.)
word-wrap:break-word;//允許長文本換行
word-break 單詞拆分換行
word-break: keep-all;//單詞拆分換行
word-break: break-all;//長度識別,普通換行


@font-face 字體調用
@font-face{
font-family:'ziti';//定義字體的名稱
    src:url('ziti/ygyxsziti2.0.ttf');//路徑
}
body{
font-family:'ziti',serif;//使用
font-weight:bold;//加粗
}
transform 2D轉換
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);/* 定度數順時針旋轉的元素 */
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
<div>你好。這是一個 DIV 元素。</div>
<div id="div2">你好。這是一個 DIV 元素。</div>




translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
div
{
transform: translate(50px,100px);//translate值（50px，100px）是從左邊元素移動50個像素，並從頂部移動100像素。
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}


scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標準語法 */


skew()X軸和Y軸傾斜的角度，如果第二個參數爲空，則默認爲0，參數爲負表示向相反方向傾斜。
transform: skew(30deg,20deg);


matrix()方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}




CSS3 3D轉換
rotateX()圍繞其在一個給定度數X軸旋轉的元素。
div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}
rotateY()圍繞其在一個給定度數Y軸旋轉的元素。
div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}


transform-origin 允許你改變被轉換元素的位置
transform-style 規定被嵌套元素如何在 3D 空間中顯示
perspective 規定 3D 元素的透視效果
perspective-origin 規定 3D 元素的底部位置
backface-visibility 定義元素在不面對屏幕時是否可見


matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義 3D 轉化。
translateX(x) 定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y) 定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z) 定義 3D 轉化，僅使用用於 Z 軸的值。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 定義 3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y) 定義 3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z) 定義 3D 縮放轉換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿 X 軸的 3D 旋轉。
rotateY(angle) 定義沿 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。
perspective(n) 定義 3D 轉換元素的透視視圖。




CSS3過渡transition
指定要添加效果的CSS屬性
指定效果的持續時間。
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
多項過渡
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}


div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}


屬性 描述
transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。 3
transition-duration 定義過渡效果花費的時間。默認是 0。
transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"
transition-delay 規定過渡效果何時開始。默認是 0
div
{
    transition-property: width; //寬度改變
    transition-duration: 1s; //花費1s
    transition-timing-function: linear; //過渡時間曲線
    transition-delay: 2s; //過渡效果何時開始
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}


@keyframes CSS3動畫
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
/* 設置動畫 */
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}


@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}


改變背景色
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
背景色和位置
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}




來回運動
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}


@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}


@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}


@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}


@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}












@keyframes 規定動畫。
@-webkit-keyframes spin {
from {
-webkit-transform: translateZ(-10em)rotateX(0)rotateY(0deg);
transform: translateZ(-10em) rotateX(0) rotateY(0deg);
}
to {
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}


animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
div{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0
animation-timing-function 規定動畫的速度曲線。默認是 "ease"
linear 動畫從頭到尾的速度是相同的。
ease 默認。動畫以低速開始，然後加快，在結束前變慢。
ease-in 動畫以低速開始。
ease-out 動畫以低速結束。
ease-in-out 動畫以低速開始和結束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
animation-delay 規定動畫何時開始。默認是 0。
animation-iteration-count 規定動畫被播放的次數。默認是 1(、infinite無限次)
animation-direction 規定動畫是否在下一週期逆向地播放。默認是 "normal"。
normal 默認值。動畫按正常播放。
reverse 動畫反向播放
alternate 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放
alternate-reverse 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。
paused 指定暫停動畫
running 指定正在運行的動畫






CSS3 創建多列


column-count 屬性指定了需要分割的列數
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}


column-gap 屬性指定了列與列間的間隙
div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}


column-rule-style 屬性指定了列與列間的邊框樣式
div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}


column-rule-width 屬性指定了兩列的邊框厚度
div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}


column-rule-color 屬性指定了兩列的邊框顏色
div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}


column-rule 屬性是 column-rule-* 所有屬性的簡寫
column-rule邊框的厚度，樣式及顏色
div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}


column-span: all;指定元素跨越多少列
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}




column-width 屬性指定了列的寬度
div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}


columns是指列的寬度和數量
div
{
    columns:100px 3;
    -webkit-columns:100px 3; /* Safari and Chrome */
    -moz-columns:100px 3; /* Firefox */
}






CSS3 用戶界面


resize屬性指定一個元素是否應該由用戶去調整大小
div
{
    resize:both;
    overflow:auto;
}


box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容
div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    float:left;
}


outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}




CSS 圖片


圓角圖片
img {
    border-radius: 8px;
}
橢圓形圖片
img {
    border-radius: 50%;
}
縮略圖
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
<img src="paris.jpg" alt="Paris" width="400" height="300">


觸碰內發光圖
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}
a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>


響應式圖片
img {
    max-width: 100%;
    height: auto;
}


圖片文本(舉一反三,可任意放置文字)
.container {
    position: relative;
}
.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}
img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
<div class="container">
  <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">左上角</div>
</div>






CSS3按鈕
普通按鈕
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
綜合屬性
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
圓角按鈕
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
邊框按鈕
.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
懸停按鈕
.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
懸停加陰影
.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
禁用按鈕(添加 cursor 屬性並設置爲 "not-allowed" 來設置一個禁用的圖片)
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
按鈕寬度設置
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
按鈕組
.button {
    float: left;
    border: 1px solid green;
}
按鈕動畫
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: ' >';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}
<button class="button"><span>Hover </span></button>
按鈕點擊波浪
.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
<button class="button">Click Me</button>
按鈕下壓
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
<button class="button">Click Me</button>






媒體查詢
520 到 699px 寬度
@media screen and (max-width: 699px) and (min-width: 520px) {
}




text-stroke 文字描邊(像素加顏色)
E:nth-child(odd||even) 選擇符號奇數行||偶數行
transition 過渡(all所有屬性 0.1過渡時間 ease加速形式 0延時0秒)
column-count:n 分成n欄