前言:

css3邊框：

border-radius 圓角
border-image 邊背景圖
box-shadow 陰影

border-radius圓角

設置百分比或者值px都可以 50% 為正圓 一個值為默認設置所有邊角 四個值代表設置四個邊角

box-shadow 陰影

設置四個值 按順序分別是

offset-x 代表x軸偏移值 值為正則代表右側，負代表左側

offset-y 代表y軸偏移值
值為正則代表上方，負代表下方

blur 代表陰影的模糊半徑
值越大則越模糊 負值不合法

color 代表模糊的顏色 可設置red或者#f1f1f1或者rgba等類型值

多重陰影 一個div上可以添加多個陰影效果，方法只需把添加的效果用 逗號 隔開即可

參考文章:http://www.iyangqiong.com/web/318.html

border-image邊角背景圖

三個值 第一個是url(文件路徑) 第二個是裁剪位置(默認像素) 第三個是重復性
這個一定程度趕上跟border寬度上有關系

border-image: <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | /

css3背景

backgournd-image
background-size
background-origin
background-clip

background-image

可添加多個背景圖 用 逗號 相隔
對應 background-position background-repeat 設置背景圖的位置和重復

background-size

可指定background-size 為背景圖片設置大小
可設置寬和高

background-origin

指定了背景圖的位置區(qū)域 三個值對應區(qū)域如圖

background-clip

這個屬性是指從指定位置開始繪制 三個值跟上邊的一樣

css3漸變

分兩種漸變：線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向和徑向漸變（Radial Gradients）- 由它們的中心定義

也就是一個是從一邊到另一邊 一個是從中間到四周的方式漸變

首先linear-gradient 線形漸變(默認從上到下)

background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction值可為開始方向也可為角度deg 后面是開始顏色和結束顏色(可為rgba也可為多個顏色值)
repeating-linear-gradient()重復性漸變

然后radial-gradient 線形漸變(四周向外擴)

background: radial-gradient(center, shape size, start-color, ..., last-color);
分別代表 漸變中心(默認center)，形狀，大小，開始顏色，結束顏色

css3文本效果

text-shadow
box-shadow 
text-overflow
word-wrap
word-break

text-shadow 文本陰影

text-shadow:四個值 如同 box-shadow

text-soverflow 文本溢出

text-overflow: 一個值 兩個內容
elipsis 溢出裁剪省略號  clip溢出裁剪

word-wrap 文本換行

word-wrap:break-word;強制自動換行

word-break 文本拆分換行

word-break:一個值 兩個內容
keep-all 保持單詞完整 break-all 保持每行夠滿字符

@font-face自定義字體

@font-face{
//自定義字體名字
font-family:name;
src:url('字體文件.ttf'),
//ie9專用字體
url('字體文件.eot');
//使用粗體文本
font-weight:bold;
}

使用的時候font-family：自定義名字

動畫相關

css3 2d轉換 transform:

translate()
rotate()  旋轉
scale()  縮放
skew()
matrix()

translate() 位移

transform:translate(x,y) 
兩個值 x正即向右移動，負值即是向左移動 y正向上負向下
也可單獨位移 **translateX(n)**  **translateY(n)**

rotate() 旋轉

rotate(deg) 正是準時針負是逆時針

scale() 縮放

scale(x,y) x是寬度x倍   y是長度y倍
也可單獨縮放 **scaleX(n)**  **scaleY(n)**

skew() 傾斜

skew(deg,deg) 表示向x軸和y軸傾斜的方向
也可單獨傾斜 **　skewX(n)**  **　skewY(n)**

matrix() 集合

matrix(位移，旋轉，縮放，傾斜)表示所有transform的集合都可以寫在這里

css3 3d轉換 改變xyz軸實現(xiàn)效果

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 總集合用于在一個屬性中設置四個過渡屬性。
transition: p(名稱) d(花費時間) f(時間曲線) d(何時開始) 
transition-delay 規(guī)定過渡效果何時開始。默認是 0。
transition-duration 定義過渡效果花費的時間。默認是 0
transition-property 規(guī)定應用過渡的 CSS 屬性的名稱
transition-timing-function  規(guī)定過渡效果的時間曲線。默認是 "ease"

CSS3 動畫

@feyframes規(guī)則
animation

1.首先使用@keyframes創(chuàng)建動畫 把它綁定到一個選擇器。否則動畫不會有效果

+ 規(guī)定動畫的名稱
+ 規(guī)定動畫的時長

2.然后用 animation 動畫捆綁到div元素

animation是一個綜合簡寫屬性(除animation-play-state) 分開分別是
animation-name  規(guī)定 @keyframes 動畫的名稱。
animation-duration  規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0。規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0。
animation-timing-function 規(guī)定動畫的速度曲線。默認是 "ease"。
animation-delay 規(guī)定動畫何時開始。默認是 0。
animation-iteration-count   規(guī)定動畫被播放的次數(shù)。默認是 1。
animation-direction     規(guī)定動畫是否在下一周期逆向地播放。默認是 "normal"。
animation-play-state    規(guī)定動畫是否正在運行或暫停。默認是 "running