在CSS中還有一樣功能:濾鏡....
濾鏡可以針對圖形或者文字來增添一些效果...
如果在搭配之前所寫的定位以及文字的性質...
可以在不使用圖檔的情況下..
讓網頁有很棒的效果,而且浏覽又快速...
CSS的濾鏡大概有14種...
較常以套用在:
<body>...</body>,<img>,<div>...</div>,<span>...</span>....等卷標上
先介紹幾種濾鏡:
alpha 濾鏡
設定性質
opacity:透明度(開始) 0-100
finishopacity:透明度(結束) 0-100
style:樣式 0|1|2|3 依序是 平均|直線|圓形|矩形
startX:開始X
startY:開始Y
finishX:結束X
finishY:結束Y
此濾鏡可以使組件有透明的效果....
blur 濾鏡
設定性質
add 顯示元對象 0|1 依序是 不要|要
direction:影像移動方向 0-359 (一個圓)
strength:模糊像的暈開幅度 0-10
此濾鏡可以使原件產生模糊影像...
chroma 濾鏡
設定性質
color:指到不顯示的顏色 colorvalue
此濾鏡可將指定的顏色不顯示...
dropshadow 濾鏡
設定性質
color:陰影顏色 colorvalue
offx:陰影位移X
offy:陰影位移Y
positive:陰影透明度 0表示透明
此濾鏡可使組件產生陰影...
fliph 濾鏡與 flipv濾鏡
不用設定,fliph會產生水平靜射,flipv會產生垂直鏡射
glow 濾鏡
color:陰影顏色
strength:陰影效果 1-255
此濾鏡可使組件產生像是被顏色包圍的感覺,如:火焰字
以上有7種濾鏡...
使用的方式同CSS的套入一樣
可以建成樣式文件、建在<head>...</head>之間、或者和Html的卷標寫在一起...
如<img src="n.jpg" style="filter:glow(colot=red,strength=10">
或者在
<head>
<style>
.style1 filter(color=red,strength=10)
</style>
</head>
-