iaitu koleksi penapis_HTML/Xhtml_pengeluaran halaman web

IE memberi kami sakit kepala pada peringkat awal pembangunan Ia tidak menyokong apa yang orang lain sokong, dan ia juga mempunyai perkara yang orang lain tidak menyokong Hari ini saya akan memperkenalkan secara ringkas salah satu cirinya.

　
　Penapis CSS digunakan terutamanya untuk mencapai pelbagai kesan khas pada imej. Ia memainkan peranan yang sangat ajaib dalam penghasilan laman web. Laman web boleh dibuat lebih cantik melalui penapis CSS Dalam CSS, atribut penapis mewakili penapis Ia boleh menetapkan kesan penapis teks, gambar dan jadual.
Sintaks: STYLE={"filter:filtername(fparameter1,fparameter2...)}
Nota: Filtername ialah nama penapis, fparameter1, fparameter2, dsb. ialah parameter penapis.
13 jenis penapis CSS Kesan cermin
1. Penapis: chroma - Jadikan warna khas lutsinar.
Sintaks: STYLE="filter:Chroma(Color=color)"
Anotasi: warna:#rrggbb format, sebarang .
2. Penapis: kabur - Cipta kesan pergerakan berkelajuan tinggi, iaitu, kesan kabur
Sintaks: STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
Anotasi: Tambah : Secara amnya 1, atau 0; Arah: Sudut, 0-315 darjah, langkahnya ialah 45 darjah Kekuatan: Nilai pertumbuhan kesan, biasanya 5 sudah cukup --Buat imej cermin menegak .
Sintaks: STYLE="filter:FlipV"
4. Penapis: alpha--Tetapkan tahap ketelusan
Sintaks: STYLE="penapis:Alpha(Opacity=opacity,FinishOpacity =finishopacity,Style=style ,StartX = startX, StartY = startY, FinishX = finish Gaya: 1 atau 2 atau 3 StartX: sebarang nilai StartY: sebarang nilai
5. Penapis: FlipH - Buat imej cermin mendatar.
Sintaks: STYLE="filter:FlipH"
6. Filter:glow--Tambahkan cahaya pada bahagian luar objek berdekatan.
Sintaks: STYLE="filter:Glow(Color=color,Strength=strength). )"
Anotasi: Warna: warna bercahaya; Kekuatan: keamatan ( 0-100)
7. Penapis:topeng--Buat topeng lutsinar pada objek.
Sintaks: STYLE="filter:Mask( Color=color)"
8. Penapis: Penapis :Xray--jadikan objek kelihatan seperti disinari oleh sinar-x.
Sintaks: STYLE="filter: :Invert"
10. Penapis: DropShadow -- Buat bayang tetap objek.
Sintaks: STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
Penandaan: Warna: format #rrggbb , mana-mana; Offx: Nilai sisihan paksi-X; Offy: Nilai sisihan paksi Y; :Kelabu"
12. Penapis: gelombang - kesan riak.
Sintaks: penapis:Gelombang(Tambah=tambah,Freq=freq,LightStrength=kekuatan,Fasa=fasa, Kekuatan=kekuatan)
Anotasi: Tambah : Umumnya 1, atau 0; Kekerapan: nilai ubah bentuk; Kekuatan Cahaya: peratusan ubah bentuk; Fasa: peratusan ubah bentuk; Warna=warna,Arah=arah)
Anotasi: Warna: format #rrggbb Arah: sudut, 0-315 darjah, saiz langkah ialah 45 darjah.
Dalam Satu perkara yang anda perlu beri perhatian apabila menggunakan penapis CSS ialah bahawa dalam reka letak tapak web semasa, penapis sering dilampirkan pada div Jika anda hanya menetapkan id untuk div dalam kod HTML, penapis tidak akan berkesan , atribut id ini mesti ditakrifkan dalam gaya atau css, jika tidak, ia tidak akan berkesan kerja.

Hanya satu ayat kod diperlukan, dan apabila membuat tapak web, imej boleh ditukar secara bebas seperti dokumen PPT. Ia sangat mudah! Sebelum penukaran, kita perlu memahami tiga kod asas:
Putaran: style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"
Alih keluar warna latar: style="filter:Chroma( Color= #000000)"
Tetapkan warna kecerunan: style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolorstr=#ffff00,gradientType= 1) "
Ulasan yang menarik: Koleksi kesan penapis CSS untuk pengeluaran tapak web
Berikut ialah koleksi penapis penukaran imej, saya harap ia dapat membantu rakan-rakan~! ! !
Transformasi rawak: progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)
Kecerunan segi empat sama: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)
Kecerunan segi empat sama Besar : progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)
Cross-smakin kecil: progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)
Cross-smakin besar: progid : DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)
Bentuk bintang semakin besar: progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)
Bentuk bintang semakin kecil: progid:DXImageTransform . Microsoft.Iris(irisstyle=star,motion=in)
Bulatan menjadi lebih besar: progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)
Bulatan menjadi lebih kecil: progid:DXImageTransform.Microsoft . Iris(irisstyle=circle,motion=in)
Berlian menjadi lebih kecil: progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)
Berlian menjadi lebih besar: progid:DXImageTransform.Microsoft.Iris (irisstyle= diamond,motion=out)
Tanda tambah menjadi lebih besar: progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
Tanda tambah menjadi lebih kecil: progid:DXImageTransform.Microsoft.Iris (irisstyle=plus, motion=in)
　Memadam ke atas: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)
　Memadam ke bawah: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction =bawah )
　Memadam ke kiri: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)
　Memadam ke kanan: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right )
Kecilkan bahagian tengah kiri dan kanan: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)
Larut secara rawak: progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)
Kembangkan bahagian tengah atas dan bawah: progid:DXImageTransform .Microsoft.Barn(motion=out,orientation=horizontal)
Kembangkan kiri dan kanan di tengah: progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)
Garisan mendatar rawak: progid:DXImageTransform.Microsoft.RandomBars( orientation=horizontal)
Garis menegak rawak: progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)
Pengecutan tengah atas dan bawah: progid:DXImageTransform .Microsoft.Barn(motion=in, orientation=horizontal)
Transformasi Kecerunan Standard: BlendTrans(enabled=true,peratus=10)
Transformasi kecerunan boleh laras: progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap =1.0)
Sisipkan ke kanan bawah: progid:DXImageTransform.Microsoft .Inset(enabled=ture)
Sembunyikan regangan: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)
Tekan regangan: progid: DXImageTransform.Microsoft.Stretch(stretchstyle=push)
Regangan putaran: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)
Jam pembilang: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge) Kesan mozek: progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)
Jam: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock) 🎜> Tangga kiri bawah: progid:DXImageTransform.Microsoft.Strips(motion=leftdown )
Bahagian atas kanan tangga: progid:DXImageTransform.Microsoft.Strips(motion=rightup)
Bahagian kiri atas tangga: progid:DXImageTransform.Microsoft.Strips(motion=leftup)
Bahagian bawah sebelah kanan tangga: progid:DXImageTransform.Microsoft Strips(motion=rightdown)
Pengecutan lingkaran: progid:DXImageTransform.Microsoft.Spiral(gridSizeX=. 20,gridSizeY=20)
Putaran Kincir Angin: progid:DXImageTransform.Microsoft.Wheel(spokes=20)
Zigzag: progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20>Hs blinds : progid:DXImageTransform.Microsoft.Blinds(bands=6, direction=down)
: progid:DXImageTransform Microsoft.Blinds(bands=6,direction=up)
　：progid:DXImageTransform.Microsoft.Blinds(bands. =60,arah=bawah)
　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction= up)
　V blinds: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)
　：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=kanan)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)
　　交换式片版 Transform.Microsoft.Blinds(bands=60,direction=left)
　　交换式片：TransImage. .Slide(slidestyle=swap,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)
　　推动式幻灯Style.Microsoft.Slide:progid:DXImageTransform. ,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)
　　隐藏式幻灯片：progid:DXImageTransform.Microsoft.Slide,(bandstyles.Slide)　　：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)　〜>:Transform Image .Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)
　　纵向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=kanan,squaresX=12,squaresY=12)　　纵向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=kanan,squaresX=12,squaresY=12)」 .Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=kanan,squaresX=2,squaresY=2)
　　：Transprogid .Checkerboard(direction=left,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=kanan,squaresX=60,squaresY=60)
　　：progid.Microsoft.Checkerboard:DXImageTransformer (direction=left,squaresX=60,squaresY=60)
　　横向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)
　:Microsoft.CheckerBoard (direction=atas,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microdirection.Microdirection. =atas,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=bawah,squaresX=60,squaresY=60)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction.Checkerboard ,squaresX=60,squaresY=60)