css學習筆記(5)動態定位 濾鏡

12、動態定位

position 定義位置 absolute relative static

left top指定橫向縱向座標位置  length percentage auto

width heigth 指定佔用空間大小

clip 剪切 shape auto

overflow 內容超出時的處理 visible hidden scroll auto

z-index產生立體效果 auto integer

visibility定義可見性

定義一個類

<style type="text/css">
 <!--
 .pile
 {position:absolute;left:2in;top:2in;width:3in;height:3in;}
 -->
</style>

以後要引用這個類,直接用class="pile"就好。

 

13、濾鏡

基本書寫格式 filter:filtername{parameters}

alpha 設置透明度

blur 設置模糊效果

chroma 指定顏色透明度

dropshadow設置投射陰影

fliph水平翻轉

flipv 垂直翻轉

glow 爲對象的外邊界增加光效

grayscale 設置灰度

invert 這支底片效果

light 設置燈光投影

mask 設置透明膜

shadow 設置陰影效果

wave 利用正弦波打亂圖片

xray只顯示輪廓

filter:alpha (opacity=(0-100), finishopacity=(0-100爲了漸變效果), style=(0(統一形狀),1(線形),2(放射狀),3(長方形) ), startX=aa, startY=aa, finishX=aa, finishY=aa)

filter:blur (add=(true false), direction=(每45度一個單位), strength=(int 多少像素將受到影響))

同時用blur濾鏡可以設置字體的效果

filter:chroma(color=red)

filter:dropshadow(color=red, offX=int, offY=int, positive=(true, false))

添加對象的陰影效果

filter:fliph/filpv 無參數

filter:glow(color=red, strength=(1-255))

邊緣產生類似發光的效果

filter:gray 沒有參數,產生灰度圖

filter:invert 沒有參數,將對象的色彩,飽和度,亮度完全翻轉

filter:mask(color=red) 建立一個覆蓋在對象表面的膜。

filter:shadow(color=color, direction=int)

shadow 和dropshadow不同在於shadow可以任意角度定義陰影,而dropshadow是通過便宜來達到陰影的效果。

filter:wave(add=(true, false), freq=頻率, lightstrength=增強光效(0-100), phase=偏移量(0-100), strength=強度)

filter:xray 沒有參數,產生X光的效果

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章