前言:
把以前的手寫筆記整理到
博客中...
css3邊框：
border-radius 圓角
border-image 邊背景圖
box-shadow 陰影
border-radius圓角
設(shè)置百分比或者值px都可以 50% 為正圓 一個(gè)值為默認(rèn)設(shè)置所有邊角 四個(gè)值代表設(shè)置四個(gè)邊角
box-shadow 陰影
設(shè)置四個(gè)值 按順序分別是
offset-x代表x軸偏移值 值為正則代表右側(cè)，負(fù)代表左側(cè)
offset-y代表y軸偏移值
值為正則代表上方，負(fù)代表下方
blur代表陰影的模糊半徑
值越大則越模糊 負(fù)值不合法
color代表模糊的顏色 可設(shè)置red或者#f1f1f1或者rgba等類型值
多重陰影一個(gè)div上可以添加多個(gè)陰影效果，方法只需把添加的效果用 逗號 隔開即可
參考文章:http://www.iyangqiong.com/web/318.html
border-image邊角背景圖
三個(gè)值 第一個(gè)是url(文件路徑) 第二個(gè)是裁剪位置(默認(rèn)像素) 第三個(gè)是重復(fù)性
這個(gè)一定程度趕上跟border寬度上有關(guān)系
border-image: <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | /
css3背景
backgournd-image
background-size
background-origin
background-clip
background-image
可添加多個(gè)背景圖 用 逗號 相隔
對應(yīng) background-position background-repeat 設(shè)置背景圖的位置和重復(fù)
background-size
可指定background-size 為背景圖片設(shè)置大小
可設(shè)置寬和高
background-origin
指定了背景圖的位置區(qū)域 三個(gè)值對應(yīng)區(qū)域如圖
background-clip
這個(gè)屬性是指從指定位置開始繪制 三個(gè)值跟上邊的一樣
css3漸變
分兩種漸變：線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向和徑向漸變（Radial Gradients）- 由它們的中心定義
也就是一個(gè)是從一邊到另一邊 一個(gè)是從中間到四周的方式漸變
首先linear-gradient 線形漸變(默認(rèn)從上到下)
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction值可為開始方向也可為角度deg 后面是開始顏色和結(jié)束顏色(可為rgba也可為多個(gè)顏色值)
repeating-linear-gradient()重復(fù)性漸變
然后radial-gradient 線形漸變(四周向外擴(kuò))
background: radial-gradient(center, shape size, start-color, ..., last-color);
分別代表 漸變中心(默認(rèn)center)，形狀，大小，開始顏色，結(jié)束顏色
css3文本效果
text-shadow
box-shadow
text-overflow
word-wrap
word-break
text-shadow 文本陰影
text-shadow:四個(gè)值 如同 box-shadow
text-soverflow 文本溢出
text-overflow: 一個(gè)值 兩個(gè)內(nèi)容
elipsis 溢出裁剪省略號 clip溢出裁剪
word-wrap 文本換行
word-wrap:break-word;強(qiáng)制自動(dòng)換行
word-break 文本拆分換行
word-break:一個(gè)值 兩個(gè)內(nèi)容
keep-all 保持單詞完整 break-all 保持每行夠滿字符
@font-face自定義字體
@font-face{
//自定義字體名字
font-family:name;
src:url('字體文件.ttf'),
//ie9專用字體
url('字體文件.eot');
//使用粗體文本
font-weight:bold;
}
使用的時(shí)候font-family：自定義名字
動(dòng)畫相關(guān)
css3 2d轉(zhuǎn)換 transform:
translate()
rotate() 旋轉(zhuǎn)
scale() 縮放
skew()
matrix()
translate() 位移
transform:translate(x,y)
兩個(gè)值 x正即向右移動(dòng)，負(fù)值即是向左移動(dòng) y正向上負(fù)向下
也可單獨(dú)位移 **translateX(n)** **translateY(n)**
rotate() 旋轉(zhuǎn)
rotate(deg) 正是準(zhǔn)時(shí)針負(fù)是逆時(shí)針
scale() 縮放
scale(x,y) x是寬度x倍 y是長度y倍
也可單獨(dú)縮放 **scaleX(n)** **scaleY(n)**
skew() 傾斜
skew(deg,deg) 表示向x軸和y軸傾斜的方向
也可單獨(dú)傾斜 ** skewX(n)** ** skewY(n)**
matrix() 集合
matrix(位移，旋轉(zhuǎn)，縮放，傾斜)表示所有transform的集合都可以寫在這里
css3 3d轉(zhuǎn)換 改變xyz軸實(shí)現(xiàn)效果
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。
translate3d(x,y,z)定義 3D 轉(zhuǎn)化
translateX(x)定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值
translateY(y)定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值
translateZ(z)定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值
scale3d(x,y,z)定義 3D 縮放轉(zhuǎn)換
scaleX(x)定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) X 軸的值
scaleY(y)定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Y 軸的值
scaleZ(z)定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Z 軸的值
rotate3d(x,y,z,angle)定義 3D 旋轉(zhuǎn)
rotateX(angle) 定義沿 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle)定義沿 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle)定義沿 Z 軸的 3D 旋轉(zhuǎn)
perspective(n) 定義 3D 轉(zhuǎn)換元素的透視視圖
CSS3 過渡
transition 總集合用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。
transition: p(名稱) d(花費(fèi)時(shí)間) f(時(shí)間曲線) d(何時(shí)開始)
transition-delay 規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。
transition-duration 定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0
transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱
transition-timing-function 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"
CSS3 動(dòng)畫
@feyframes規(guī)則
animation
1.首先使用@keyframes創(chuàng)建動(dòng)畫 把它綁定到一個(gè)選擇器。否則動(dòng)畫不會(huì)有效果
+ 規(guī)定動(dòng)畫的名稱
+ 規(guī)定動(dòng)畫的時(shí)長
2.然后用 animation 動(dòng)畫捆綁到div元素
animation是一個(gè)綜合簡寫屬性(除animation-play-state) 分開分別是
animation-name 規(guī)定 @keyframes 動(dòng)畫的名稱。
animation-duration 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。
animation-timing-function 規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。
animation-delay 規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。
animation-iteration-count 規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。
animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。
animation-play-state 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running
