css3的新功能我也看了一一些,做了乙個簡要的筆記,總結一下,當成學習筆記發上來,這是css3的第四篇了。
漸變
方法說明
createlineargradient(x1,y1,x2,y2)
建立線性漸變物件,引數是兩個點的座標,確定線性漸變方向
createradialgradient(x1,y1,r1,x2,y2,r2)
建立放射漸變物件,引數是啟示圓座標和半徑、終止圓座標和半徑
adcolorstop(stop,color)
定義乙個漸變位置的範圍和顏色,stop介於0.0到1.0,color為顏色
乙個例子:
vargrd=dw.createlineargradient(0,60,120,0);
grd.addcolorstop(0,"black");
grd.addcolorstop("0.3","blue");
grd.addcolorstop("0.7","red");
grd.addcolorstop(1,"yellow");
dw.fillstyle=grd;
dw.fillrect(20,20,150,100);
陰影
方法說明
shadowcolor
設定或返回陰影的顏色
shadowblur
設定或返回陰影的模糊程度
shadowoffsetx
設定或返回陰影距形狀的水平距離,可為負
shadowoffsety
設定或返回陰影距形狀的垂直距離,可為負
乙個例子:
dw.shadowcolor="black";
dw.fillstyle="red";
dw.shadowblur=10;
dw.shadowoffsety=10;
dw.fillrect(20,20,100,80);
轉換 (類似於css的 變形transform,關鍵字都一樣,用法也一樣)
方法:scale
縮放、反轉效果,傳入兩個引數,允許負值,會影響到之後所有的操作,使用完畢後要恢復
translate
平移效果
rotate
旋轉效果,傳入引數是弧度,不是角度,和css不同
transform
矩形轉換,所有轉換都通過這個方法實現,計算很麻煩
影象合成方式
方法:globalcompositionoperation
通過設定不同的引數,實現影象疊加不同效果,比如z-index的重疊效果
引數有:
source-over
source-atop
source-in
source-out
destination-over
destination-atop
destination-in
destination-out
lighter
copy
CSS3全覽 最新布局
目錄很長時間,浮動元素是所有 web 布局方案的基礎 很大程度上依賴 clear 屬性 浮動 清除浮動 浮動形狀 使用透明影象定義形狀,shape image threshold,指定透明度為多少時允許內容流入.為形狀新增外邊距,shape margin 為形狀新增 外邊距 它可能被margin裁剪...
HTML5 CSS3新特性一覽(上)
已移除元素 新功能 其他新特性 持更 html5 新增了很多語義元素,常用的有 html5 擁有多個新的表單輸入型別。這些新特性提供了更好的輸入控制和驗證。color date datetime datetime local email month number range search tel t...
用CSS3和Canvas來畫網格
我們經常使用一些excel 來處理資料,在html中,我們可以用table來製成 今天來看一下一些不同的方法。方法一 使用css3的background的linear gradient屬性 linear gradient表示一種線性漸變,指定好開始的座標,以及線性漸變的引數,就可以實現背景顏色的多變...