---------文字描邊/填充

text-stroke: --px color; 描邊寬度 顏色

text-fill-color: color; 填充顏色

---------文字模糊/陰影

text-shadow: --px --px --px color , --px --px --px color;

水平位置 垂直位置 陰影模糊大小 陰影顏色 可疊加

---------背景陰影

box-shadow: x(必寫) y(必寫) blur spread color inset/outset;

水平(-右+左) 垂直(-上+下) 模糊距離 陰影大小 顏色 內/外顯示

---------多重陰影

box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111;

inset/outset:內外陰影

---------背景透明度

background: rgba(0-255, 0-255, 0-255, 0-); 背景透明底(不繼承)

opacity:0-1; 背景透明底(繼承)

filter:alpha(opacity=0-100); (兼容寫法)

---------背景漸變色

Linear-gradient: 線性漸變

background: -webkit-linear-gradient( left , red , blue ) 可設置多個顏色

(方向left/top , 1顏色/start, 2顏色, 3顏色, ...多個顏/stop)

-webkit- :瀏覽器支持 –moz- -o-

background: -webkit-linear-gradient( left , red --% , blue --% )

red --% :1色起始位置 100%為紅

blue--% :2色起始位置 1%位蘭

blue :結束色 長度為100% - (red% + blue%)

background: -webkit-linear-gradient( --deg , red , blue )

0deg –右 45deg –右上 90deg –上 135deg—左上 180—左

0deg –右 -45deg –右下 -90deg –下 -135deg—左下 -180—左

Radial-gradient: 徑向漸變

background: -webkit- Radial-gradient ( ---px , red , blue , …)

--px: 焦點距離 (left方位可寫)

repeating-linear-gradient: 重復漸變

repeating-radial-gradient: 重復徑變

repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);

circle closest-side 2個值指定位置

circle--: 圓心

closest-side: 圓外側

---------邊框框倒角

border-radius:0 – 99999px/ 0-100%/ em / rem; 四邊倒角(50%為圓)

border- top-left-radius: 0 – 99999px/ 0-100%/ em / rem; 單個倒角

border-radius: --px –px –px –px ; 四個值: 左 右 下 左

---------邊框圖片

border-width: --px;

border-image: url(‘images/flow2.jpg‘) -- -- round/stretch ;

背景圖片路徑 向內移動高度 向內移動寬度 平鋪/拉伸

註意:邊框寬度調整圖片寬

原理:圖片4個角按設置尺寸加載圖片，圖片以向內移動的尺寸均勻顯示在邊框中

---------邊框漸變

border: --px solid;

border-image: -webkit-linear-gradient(位置 , color %, color, ..) –px –px;

--px: 邊框高寬

---------過渡效果

Transition: property duration delay timing-function

對象 持續時間 延遲 貝塞爾曲線(運動方式)

transition: width ,height --s ease;

多個屬性

transition: all --s ease;

全部屬性

all /none – 選擇全部變化的屬性/無過度 可單選屬性width height …

--s – 過度時間

Ease – 變慢方式 ease/逐漸變慢 linear/勻速 ease-out/減速

Ease-in-out/加速然後減速

hover{ transition: all 5s;}:

恢復沒有過渡效果

delay:

開始恢復都有過度效果

作用的屬性:

vstart() 開始值

vres() 過度值

vend() 結束值

p 過渡函數輸出值

vres=(1-p)*vstart+p*vend(正直可過度)

可過度:line-height,text-algin,opacity.shadow, width,height ,backgroun-colo,color,位置移動

無過度:dispaly

---------動畫效果

動畫定義

animation: name duration delay timing-function iteration-count direction play-state fill-mode

名字 運行時間 延遲 運動曲線 播放次數 往復方式 播放暫停

之前之後效果

運動描述 線性

@keyframes name

{

From{ : ;}

To{ : ; }

}

運動描述 關鍵幀

@-webkit-keyframes skyset {

0% { background: red;}

50%{ background: blue}

100% {background: yellow;}

}

animation: --1 --2 –3 –4 –5 –6 –7 --8 ;

--1:動畫名字

--2:運行時間

--3:運行模式(同過度) + steps()函數 steps( -- )

--4:開始之前的延遲

--5:播放次數 n次數 infinite循環

--6:動畫運行方向 normal 默認正常方向alternate 輪流方向播放

--7:動畫暫停 paused暫停動畫 running播放動畫

--8:關鍵幀控制none不改變默認 forwards播完保留最後一個屬性

Backwards僅留第一個顯示狀態 both前後填充模式都采用

@-webkit-keygrames mymove {} 兼容谷歌

@-moz-keygrames mymove {} 兼容火狐

動畫加載

.select:hover {

animation: name --s ease infinite;

}

@keyfarmes name {

}

實例

.box {

animation: mymove 5s infinite;

/*-- 動畫定義: 名字 時間 循環--*/

}

@keyframes mymove { /*-- 動畫效果 --*/

from {left:0px;}

to {left:200px;}

}

---------邊框多色

-moz-border-bottom-colors: red blue yellow;

從外向裏 一個顏色1px寬度，剩余寬度顯示最後顏色 (只有火狐瀏覽器支持)

---------倒影

box-reflect: none direction(倒影位置) offset(倒影距離) mask-box-image(倒影遮蓋);

none-- 有無

direction-- above/ below/ left/ right 上 下 左 右

offset-- 倒影距離

例:

-webkit-box-reflect: below 10px -webkit-linear-gradient(top , rgba(255, 255, 255, 0.0) 10% , rgba(255, 255, 255, 0.2) , rgba(255, 255, 255, 0.6) );

css3高級樣式