ホームページ > 記事 > ウェブフロントエンド > CSS フィルター属性構文の概要_基本チュートリアル

CSS フィルター属性構文の概要_基本チュートリアル

WBOYオリジナル: 2016-05-16 12:08:171575ブラウズ

css フィルター
スタイル属性:
タグに適用でき、

で広く使用できます。

などのタグ、
さらに重要なのは、タグ内で使用できることです。
ページ切り替え効果:
先頭とページの間に「」を追加します。
説明: 期間はページ切り替えの時間の長さです。3.000 は 3 秒を意味します。通常は 3 を直接入力できます。
; トランジションは切り替え効果で、切り替え効果は1～23まで22種類あり、そのうち23
はランダム効果です。
フィルター効果:
Photoshop フィルターをたくさん使用したので、ページ上でフィルターを使用して新しい意味を作成してください。
構文: STYLE="filter:filtername(fparameter1,fparameter2...)}
(Filtername はフィルタの名前、fparameter1、fparameter2 などはフィルタのパラメータです)
フィルタの説明:
Alpha: 透明度を設定します。
blur: 高速で動く効果、つまりぼかし効果を作成します。
Chroma: 特殊な色を透明にします。
DropShadow: 固定色を作成します。
FlipH: 画像を水平にミラーリングします。
FlipV: 垂直にミラー画像を作成します。
glow: 近くのオブジェクトのエッジの外側に光を追加します。
gray: 画像をグレースケールします.
invert: 色を反転します。
light: オブジェクト上に光源を作成します。
mask: オブジェクト上に透明なマスクを作成します。
shadow: オフセット固定影を作成します。
wave: リップル効果
Xray: オブジェクトを X 線照射と同じように見せます。
1. Filter:alpha
構文:
STYLE="filter:Alpha(Opacity=opacity,FinishOpacity =finishopacity,Style=style,
StartX=startX,StartY= startY, FinishX = 終了 BR>スタイル: 1 または 2 または 3
開始 X: 任意の値
開始 Y: 任意の値
例: フィルター:Alpha(Opacity="0",FinishOpacity="40",Style="2")
2. Filter:blur
構文:
STYLE="filter:Blur(Add=add,Direction=方向、
強度=強度)"
説明:
加算: 通常は 1 または 0。
方向: 角度、0 ～ 315 度、ステップサイズは 45 度。
強度: 値エフェクトの増加量、通常は 5 で十分です。
例: filter:Blur(Add ="1",Direction="45",Strength="5")
3. Filter:chroma
構文: STYLE="filter:Chroma(Color=color)"
説明:
color:#rrggbb 形式、任意。
例: filter:Chroma(Color="#FFFFFF")
4フィルタ: DropShadow
構文:
STYLE="filter: DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
説明:
Color:#rrggbb 形式、任意
Offx: X 軸の偏差値
Offy: Y 軸の偏差値
正:1 または 0
例: filter:DropShadow(Color="#6699CC",OffX) ="5",OffY="5",
Positive="1" )
5. フィルター: FlipH
構文:
STYLE="filter:FlipH"
例: フィルター: FlipH
6. フィルター: FlipV
構文:
STYLE="filter:FlipV"
例: filter:FlipV
7. フィルター: グロー
構文:
STYLE= "filter:Glow(Color=color,Strength=strength)"
説明:
色: グローの色
強度: 強度 (0-100)
例: filter:Glow(Color= #6699CC",Strength="5")
8 フィルター :Gray
構文:
STYLE="filter:Gray"
例: filter:Gray
9. フィルター:反転
>構文:
STYLE="filter:Invert" 例: filter:Invert
10. フィルター:マスク
構文:
STYLE="filter:Mask(Color=color)" 例: filter:Mask(Color="#FFFFE0 ")
11. フィルター: シャドウ
構文:
filter:Shadow(Color=color,Direction=direction)
説明:
カラー:#rrggbb 形式。
方向:角度、0 ～ 315 度、ステップサイズは 45 度。
例:filter:Shadow(Color="#6699CC",Direction="135")
12.フィルタ: Wave
構文:
filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,
Strength=strength)
説明:
Add:General は1、または 0。
Freq: 変形値。
LightStrength: 変形パーセンテージ。
Phase: 角度変形パーセンテージ。
Strength: 変形強度。
例: filter:wave(Add= " 0",Phase="4",Freq="5",LightStrength="5",Strength="2")
13. フィルター: Xray
構文:
STYLE="フィルター: Xray"
例:フィルター:X 線

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Web 標準を確立する理由と Web 標準の利点次の記事：Web 標準を確立する理由と Web 標準の利点

続きを見る

CSS フィルター属性構文の概要_基本チュートリアル

関連記事