Die grundlegendsten CSS-Textfiltereffekte_CSS/HTML-CSS-Tutorial-php.cn

Die grundlegendsten CSS-Textfiltereffekte_CSS/HTML

WBOY

Freigeben： 2016-05-16 12:12:03

Original

1432 Leute haben es durchsucht

Nehmen wir unten ein Beispiel. Die Kombination von zwei oder mehreren verschiedenen Filtern führt zu unerwarteten Effekten. Probieren Sie es einfach selbst aus Wenn es um die Farbanpassung geht, ist der Effekt manchmal nicht sichtbar, wenn die Farbe nicht richtig verwendet wird, aber auch die Anwendung des Hintergrundbilds hat einen guten Effekt.

<table border="1" style="border-style: solid; border-width: 1;font-size=12px" width="520"> 
  <tr> 
    <td width="510"> 
    <span style="font-size:30pt;display:block; 
             text-align:center;color:blue; 
             filter:glow(color=red,strength=10);height:1">一路阳光  </span>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
    <span style="font-size:30pt;display:block;  
             text-align:center;color:darkblue;  
             filter:blur(add=t,direction=135,strength=10);height:1">一路阳光</span>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
<div style="color:red;font-size:25pt;height:1;display:block;  
filter:progid:DXImageTransform.Microsoft.motionblur(strength=30,add=1,direction=135)">  
        <p align="center"> 一路阳光</p>
</div>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
<div style="height:1;width:100%;  
   font-family:impact;font-size:30pt;color:navy;display:block;  
   filter:progid:DXImageTransform.Microsoft.wave(Strength=3)">  
        <p align="center"> 一路阳光</p>
</div>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
<div style="height:1;width:100%; 
   font-family:impact;font-size:30pt;color:navy;display:block; 
   filter:progid:DXImageTransform.Microsoft.wave(Strength=3,freq=5)">  
        <p align="center"> 一路阳光</p>
</div>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
<span style="font-size:30pt;display:block; 
             text-align:center;color:darkblue; 
             filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5); 
             height:1">一路阳光</span>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
<span style="font-size:30pt;display:block; 
             text-align:center;color:darkblue; 
             filter:shadow(color=blue);height:1">一路阳光</span>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
<div align="center" style="height:1;font-size:30pt; 
 filter:dropshadow(color=maroon,positive=1);">一路阳光</div>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
<div align="center" style="height:1;font-size:30pt; 
 filter:dropshadow(color=maroon,positive=0);">一路阳光</div>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
<div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5); 
 height:1;font-size:20pt;font-family:impact;background-color:blue">  
        <p align="center">SUNNY</p>
</div>
</td> 
  </tr> 
  <tr> 
    <td width="510"> 
<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5); 
 height:1;font-family:impact;font-size:20pt;background-color:blue">  
        <p align="center">SUNNY</p>
</div>
</td> 
  </tr> 
  <tr>  
    <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font color="blue" size="6"><b>一路阳光</b></font></td> 
  </tr> 
  <tr>  
    <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=blue,direction=135)" align="center"><font color="blue" size="6"><b>一路阳光</b></font></td> 
  </tr> 
  <tr>  
    <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font color="blue" size="6"><b>一路阳光</b></font></td> 
  </tr> 
  <tr>  
    <td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font color="#E1E4EC" size="6"><b>一路阳光</b></font></td> 
  </tr> 
  <tr>  
    <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font color="#8C96B5" size="6"><b>一路阳光</b></font></td> 
  </tr> 
  <tr>  
    <td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height="54"><font color="#8C96B5" size="6"><b>一路阳光</b></font></td> 
  </tr> 
  <tr> 
    <td><span style="position:absolute;font-size:30pt;color=blue;filter:fliph">一路阳光</span></td> 
  </tr> 
  <tr> 
    <td><span style="position:absolute;left:200;font-size:30pt;color=blue;filter:flipv">一路阳光</span></td> 
  </tr> 
</table>
<table align="center" background="http://www.idc2008.com/468X60-8.gif" border="0"> 
  <tr>  
    <td style="FILTER: glow(strength=4)mask(color=#E1E4EC)"><font size="7"> <b>一路阳光</b></font></td> 
  </tr> 
</table>

[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]