首頁 > web前端 > css教學 > css基礎教學濾鏡效果

css基礎教學濾鏡效果

PHP中文网
發布: 2018-09-27 17:24:24
原創
1903 人瀏覽過

1、alpha 濾鏡

文法:

{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}
登入後複製

 " alpha"屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種「與背景混合」通俗地說就是一個元素的透明度。透過指定座標,可以指定點、線、面的透明度。

他們的參數意義分別如下:

「opacity"代表透明度水準。預設的範圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。

"finishopacity"是一個可選參數,如果想要設定漸變的透明效果,就可以使用他們來指定結束時的透明度。範圍也是0 到 100。

「style" 參數指定了透明區域的形狀特徵。其中0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。

」startx「和」starty「代表漸層透明效果的開始x和y座標。

」finishx「和」finishy「代表漸變透明效果結束x和y 的座標。

效果如下:

css基礎教學濾鏡效果css基礎教學濾鏡效果
54496943888753css基礎教學濾鏡效果

2、blur 濾鏡

語法:對於html:

{ilter:blur(add=add,direction=direction,strength=strength)}
登入後複製

為script語言:

[oblurfilter=] object.filters.blur
登入後複製

用手指在一幅尚未乾透的油畫上快速劃過時,畫面就會變得模糊。 ”blur"就是產生同樣的模糊效果。
「add」參數是一個布林判斷「true(預設)」或「false」。它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的;

「direction」參數用來設定模糊的方向。其中0度代表垂直向上,然後每45度為一個單位。它的預設值是向左的270度;

「strength「值只能用整數來指定,她代表有多少像素的寬度將會受到模糊影響。預設是5個。

對於網頁上的字體,如果設定他的模糊」add=1“,那麼這些字體的效果會非常好看的。如下:

filter:blur(add=ture,direction=135,strength=10)
登入後複製

我向你飛,雨溫柔地綴!

tbody>
css基礎教學濾鏡效果css基礎教學濾鏡效果
css基礎教學濾鏡效果css基礎教學濾鏡效果

3、fliph, flipv 濾鏡

語法:{filter:filph} ,{filter:filpv} 分別是水平反轉和垂直反轉,具體如下:

css基礎教學濾鏡效果水平反转 style="filter:fliph;"
垂直反转 style="filter:flipv;"先水平反转,然后垂直反转  style="filter:flip() flipv()" td>

4、chroma 濾鏡

文法:

{filter:chroma(color=color)}
登入後複製

       所使用」chroma"屬性可設定物件中指定的顏色為透明色,而參數color即要透明的顏色。下面是蘭色文字,然後用chroma 濾鏡過濾掉蘭色,就成了下面的樣子。

filter:chroma(color=blue)
登入後複製

滴水簷坊

5.dropshadow 濾鏡

文法:

{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}
登入後複製

「dropshaow"顧名思義就是添加物件的陰影效果。其工作原理是建立一個偏移量,加上較深。

"color"代表投射陰影的顏色,"offx"和"offy"分別是x方向和y方向陰影的餓偏移量。

"positive"參數是一個布林值,如果為“true(非0)”,那就為任何的非透明像素建立可見的投影。

如果為“fasle(0)”,那麼就為透明的像素部分建立透明效果

  dropshadow(color=gray,offx=5,offy=5.positive=0)後的文字
css基礎教學濾鏡效果dropshadow(color=gray,offx=5,offy=5.positive=0) 效果
    正常文字

6、glow 濾鏡

語法:

{filter:glow(color=color,strength)}
登入後複製

當對一個物件使用"glow"屬性後,這個物體的邊緣就會產生類似發光的效果。 「color」是指定發光的顏色,「strength」則是強度的表現,可以從1到255之間的任何整數來指定這個力度。
filter:glow(color=red,strength=10) 後的效果

滴水簷茶坊

filter:glow(color=#ffff00,strength=5) 後的效果

滴水簷茶坊 span>

好像可以把photoshop踹到一邊了,是嗎

以上是css基礎教學濾鏡效果的內容,更多相關內容請關注php中文網(www.php.cn)!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板