IE membuat kami mengembangkan sesuatu yang sakit kepala di masa lalu. Dia berbeda dari yang lain. Dia tidak mendukungnya, dan dia memiliki sesuatu yang orang lain tidak mendukungnya. Hari ini saya akan memperkenalkan salah satu fiturnya - filter.
Filter CSS terutama digunakan untuk mencapai berbagai efek khusus dari gambar. Ini memiliki peran yang sangat ajaib dalam pembuatan situs web. Situs web dapat dibuat lebih indah melalui filter CSS. Di CSS, atribut filter mewakili arti filter, yang dapat mengatur efek filter dari teks, gambar, dan tabel.
Sintaks: style = {filter: filtername (fparameter1, fparameter2 ...)}
CATATAN: FileName adalah nama filter, fparameter1, fparameter2, dll. Adalah parameter filter.
13 Efek Filter CSS
1. Filter: Chroma - Buat warna khusus transparan.
Sintaks: Style = Filter: Chroma (Color = Color)
Tag: Warna: format #rrggbb, apapun.
2. Filter: Burung-Buat Efek Gerakan Kecepatan Tinggi, yaitu, efek blur.
Sintaks: style = filter: blur (add = add, arah = arah, kekuatan = kekuatan)
Catatan: Tambahkan: Umumnya 1, atau 0; Arah: sudut, 0-315 derajat, panjang langkah adalah 45 derajat; Kekuatan: Nilai pertumbuhan efek, biasanya 5.
3. Filter: Flipv-Buat gambar cermin vertikal.
Sintaks: Gaya = Filter: Flipv
4. Filter: Alpha-Hirarki Transparan Alfa
Sintaks: style = filter: alpha (opacity = opacity, finishopacity = finishopacity, style = style, startx = startx, starty = starty, finishx = finishx, finishy = finishy)
Catatan: Opacity: Nilai Mulai, nilainya 0-100, 0 transparan, 100 adalah gambar asli; Finishopacity: nilai target; Gaya: 1 atau 2 atau 3; Startx: nilai apa pun; Starty: Nilai apa pun
5. Filter: Fliph - Buat gambar cermin horizontal.
Sintaks: Style = Filter: Fliph
6. Filter: Glow-Tepung kemuliaan di luar tepi objek terdekat.
Sintaks: Style = Filter: Glow (Color = Color, Strength = Strength)
Label: Warna: Warna bercahaya; Kekuatan: Intensitas (0-100)
7. Filter: Mask-buat masker transparan pada objek.
Sintaks: Style = Filter: Mask (Color = Color)
8. Filter: Filter: Xray-buat objek terlihat seperti diterangi oleh x-ray.
Sintaks: Style = Filter: xray
9. Filter: Warna Invert-Invert.
Sintaks: Style = Filter: Invert
10. Filter: Dropshadow - Membuat bayangan tetap dari suatu objek.
Sintaks: style = filter: dropshadow (warna = warna, offx = offx, offy = offy, positif = positif)
Label: Warna: format #rrggbb, sewenang -wenang; OFFX: Nilai penyimpangan sumbu x; Offy: nilai deviasi sumbu y; Positif: 1 atau 0.
11. Filter: abu-abu abu-abu gambar.
Sintaks: Style = Filter: Grey
12. Filter: Efek Gelombang-Ridpling.
Sintaks: Filter: Wave (add = add, freq = freq, lightstrength = kekuatan, fase = fase, kekuatan = kekuatan)
Catatan: Tambahkan: Umumnya 1, atau 0; FREQ: Nilai deformasi; LightStrength: Persentase Deformasi; Fase: persentase deformasi sudut; Kekuatan: kekuatan deformasi.
13.Shadow-Buat Offset Fixed Shadow.
Sintaks: Filter: Shadow (Color = Color, Direction = Direction)
Label: Warna: format #rrggbb; Arah: Sudut, 0-315 derajat, ukuran langkah adalah 45 derajat.
Saat menggunakan filter CSS, satu hal yang harus Anda perhatikan adalah bahwa dalam tata letak produksi situs web saat ini, filter sering dilampirkan ke DIV. Jika Anda cukup mengatur ID untuk div dalam kode HTML, filter tidak akan berfungsi. Atribut ID ini harus didefinisikan dalam gaya atau CSS, jika tidak itu tidak akan berhasil.
Hanya satu kalimat kode yang diperlukan, dan gambar dapat dialihkan dengan bebas seperti dokumen PPT saat membuat situs web. Ini sangat sederhana! Sebelum mengonversi, kita perlu memahami tiga kode dasar:
Rotasi: style = filter: progid: dximagetransform.microsoft.basimage (rotasi: 1)
Hapus Latar Belakang Warna: Gaya = Filter: Chroma (Color =#000000)
Atur gradien warna: style = posisi: relatif; kiri: 0px; atas: 0px; filter: progid: dximagetransform.microsoft.gradient (startColorStr =#ff0000, endcolorstr =#ffff00, gradientType = 1)
Ulasan Luar Biasa: Kumpulan Lengkap Efek Filter CSS untuk Produksi Situs Web
Di bawah ini adalah koleksi lengkap filter konversi gambar, saya harap ini dapat membantu teman ~! Lai Lai
Transformasi acak: progid: dximagetransform.microsoft.revealtrans (diaktifkan = true, transition = 23)
Square semakin kecil: progid: dximagetransform.microsoft.iris (irisstyle = square, motion = in in)
Square semakin besar: progid: dximagetransform.microsoft.iris (irisstyle = square, motion = out)
Cross-Smarthing: Progid: dximagetransform.microsoft.iris (irisstyle = cross, motion = in in)
Cross-Dive: Progid: dximagetransform.microsoft.iris (irisstyle = cross, motion = out)
Bentuk bintang semakin besar: progid: dximagetransform.microsoft.iris (irisstyle = star, motion = out)
Bentuk bintang secara bertahap lebih kecil: progid: dximagetransform.microsoft.iris (irisstyle = star, motion = in in)
Lingkaran semakin besar: progid: dximagetransform.microsoft.iris (irisstyle = lingkaran, gerak = keluar)
Lingkaran secara bertahap lebih kecil: progid: dximagetransform.microsoft.iris (irisstyle = lingkaran, gerak = dalam)
Bentuk berlian secara bertahap lebih kecil: progid: dximagetransform.microsoft.iris (irisstyle = berlian, gerak = dalam)
Diamond semakin besar: progid: dximagetransform.microsoft.iris (irisstyle = berlian, gerak = keluar)
Tanda plus semakin besar: progid: dximagetransform.microsoft.iris (irisstyle = plus, motion = out)
Tanda plus secara bertahap menjadi lebih kecil: progid: dximagetransform.microsoft.iris (irisstyle = plus, motion = in in)
Hapus ke atas: Protokol: dximagetransform.microsoft.blinds (pita = 1, arah = atas)
Hapus Down: Protokol: dximagetransform.microsoft.blinds (pita = 1, arah = ke bawah)
Hapus kiri: Protokol: dximagetransform.microsoft.blinds (pita = 1, arah = kiri)
Hapus ke kanan: Protokol: dximagetransform.microsoft.blinds (pita = 1, arah = kanan)
RETRACT DARI Tengah KIRI DAN KANAN: Progid: dximagetransform.microsoft.barn (gerak = dalam, orientasi = vertikal)
Random Dissolve: Progid: dximagetransform.microsoft.randomdissolve (enable = true)
Area pusat diperluas ke atas dan ke bawah: progid: dximagetransform.microsoft.barn (gerak = keluar, orientasi = horizontal)
Perluas kiri dan kanan di tengah: progid: dximagetransform.microsoft.barn (gerak = out, orientasi = vertikal)
Garis horizontal acak: progid: dximagetransform.microsoft.randombars (orientasi = horizontal)
Garis vertikal acak: progid: dximagetransform.microsoft.randombars (orientasi = vertikal)
Penyusutan Tengah Atas dan Bawah: Progid: dximagetransform.microsoft.barn (gerak = dalam, orientasi = horizontal)
Konversi gradien standar: Blendtrans (diaktifkan = true, persen = 10)
Konversi Gradien yang Dapat Disesuaikan: Progid: dximagetransform.microsoft.fade (diaktifkan = ture, tumpang tindih = 1.0)
Masukkan ke kanan bawah: Protokol: dximagetransform.microsoft.inset (diaktifkan = ture)
Sembunyikan Peregangan: Progid: dximagetransform.microsoft.stretch (Stretchstyle = hide)
Progid: dximagetransform.microsoft.stretch (stretchstyle = push)
Rotary Stretch: Progid: dximagetransform.microsoft.stretch (Stretchstyle = spin)
Anti-Clock: Progid: dximagetransform.microsoft.radialwipe (wipestyle = wedge)
Sinar radiasi: progid: dximagetransform.microsoft.radialwipe (wipestyle = radial)
Efek mosaik: progid: dximagetransform.microsoft.pixelate (maxsquare = 20)
Jam: Progid: dximagetransform.microsoft.radialwipe (wipestyle = jam)
Tangga kiri bawah: Progid: dximagetransform.microsoft.strips (gerak = kiri)
Kanan Atas Tangga: Progid: dximagetransform.microsoft.strips (motion = rightup)
Tangga kiri atas: progid: dximagetransform.microsoft.strips (motion = leftup)
Right Right of the Ladder: Progid: dximagetransform.microsoft.strips (motion = rightdown)
Penyusutan spiral: progid: dximagetransform.microsoft.spiral (gridsizex = 20, gridsizey = 20)
Rotasi Windmill: Progid: dximagetransform.microsoft.wheel (spoke = 20)
Twist berbentuk Z: progid: dximagetransform.microsoft.zigzag (gridsizex = 20, gridsizey = 20)
ＨBlinds: Progid: dximagetransform.microsoft.blinds (band = 6, arah = ke bawah)
: progid: dximagetransform.microsoft.blinds (band = 6, arah = atas)
: progid: dximagetransform.microsoft.blinds (band = 60, arah = ke bawah)
: progid: dximagetransform.microsoft.blinds (band = 60, arah = atas)
V Tirai: Progid: dximagetransform.microsoft.blinds (band = 6, arah = kanan)
: progid: dximagetransform.microsoft.blinds (band = 6, arah = kiri)
: progid: dximagetransform.microsoft.blinds (band = 60, arah = kanan)
: progid: dximagetransform.microsoft.blinds (band = 60, arah = kiri)
Slide Beralih: Progid: dximagetransform.microsoft.slide (slidestyle = swap, pita = 1)
: progid: dximagetransform.microsoft.slide (slidestyle = swap, band = 20)
Push Slide: Progid: dximagetransform.microsoft.slide (slidestyle = push, bands = 1)
: progid: dximagetransform.microsoft.slide (slidestyle = push, band = 20)
Sembunyikan Slide: Progid: dximagetransform.microsoft.slide (slidestyle = hide, bands = 1)
: progid: dximagetransform.microsoft.slide (slidestyle = hide, band = 20)
Kemajuan Fuzzy: Progid: dximagetransform.microsoft.gradientwipe (gradien = 0,5, wipestyle = 0, gerak = maju)
: progid: dximagetransform.microsoft.gradientwipe (gradiensize = 0,5, wipestyle = 0, motion = reverse)
: progid: dximagetransform.microsoft.gradientwipe (gradiensize = 0,5, wipestyle = 1, motion = maju)
: progid: dximagetransform.microsoft.gradientwipe (gradiensize = 0,5, wipestyle = 1, motion = reverse)
Papan catur vertikal: progid: dximagetransform.microsoft.checkerberboard (arah = kanan, kuadrat = 12, squaresy = 12)
: progid: dximagetransform.microsoft.checkerberboard (arah = kiri, squaresx = 12, squaresy = 12)
: progid: dximagetransform.microsoft.checkerberbl (arah = kanan, kuadrat = 2, kuadrat = 2)
: progid: dximagetransform.microsoft.checkerberboard (arah = kiri, squaresx = 2, squaresy = 2)
: progid: dximagetransform.microsoft.checkerberbl (arah = kanan, kuadrat = 60, kuadrat = 60)
: progid: dximagetransform.microsoft.checkerberbl (arah = kiri, kuadrat = 60, kuadrat = 60)
Papan Catur Horizontal: Progid: dximagetransform.microsoft.checkerberbl (arah = bawah, kuadrat = 12, kuadrat = 12)
: progid: dximagetransform.microsoft.checkerberboard (arah = atas, squaresx = 12, squaresy = 12)
: progid: dximagetransform.microsoft.checkerberbl (arah = bawah, kuadrat = 2, kuadrat = 2)
: progid: dximagetransform.microsoft.checkerberboard (arah = atas, squaresx = 2, squaresy = 2)
: progid: dximagetransform.microsoft.checkerberboard (arah = bawah, squaresx = 60, squaresy = 60)
: progid: dximagetransform.microsoft.checkerberboard (arah = atas, squaresx = 60, squaresy = 60)