CSS-Filter zur Erzielung eines Textstricheffekts (FF und IE6 werden nicht unterstützt)

Erfahrung: Obwohl der CSS-Filtereffekt schön und einfach zu verwenden ist, ist er nicht für die Webseitenproduktion geeignet, da er FF und IE6 nicht unterstützt. Für Künstler ist es am besten, dies nicht zu tun Verwenden Sie es für die Webseitenproduktion. Das reduziert Ihren technischen Inhalt.

Methode 1:

<span style="position:absolute;width:150;filter:shadow(color=orange);font-size:45pt;color:yellow">文字</span>

Methode 2:

<p style="font-size:12px;height:12px;color:white;filter:glow(color=black,strength=1);">Text描边字</p>

Methode 3:

<style. type="text/css">
body {font:12px "Verdana";filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100);background-color:#3366cc;}
span {
      position:absolute;
      padding:4px;
      filter:
          Dropshadow(offx=1,offy=0,color=white)
          Dropshadow(offx=0,offy=1,color=white)
          Dropshadow(offx=0,offy=-1,color=white)
          Dropshadow(offx=-1,offy=0,color=white);
}
#english {
      font-size:14px;}
</style>

<span id="english">This is the prospect of filter - dropshadow.</span><span>中文描边效果</span>

.font {
         font-family: "新宋体";
          font-size: 12px;
          font-style. normal;
          color: #FFFF00;
          padding:1px;
          letter-spacing: 2px;
         
    filter:
         Dropshadow(offx=1,offy=0,color=black)
          Dropshadow(offx=0,offy=1,color=black)
          Dropshadow(offx=0,offy=-1,color=black)
          Dropshadow(offx=-1,offy=0,color=black);
}

Methode 4:

#text { float:left; color:#C60A12; 
filter:Dropshadow(offx=1,offy=0,color=#ffffff) 
Dropshadow(offx=0,offy=1,color=#ffffff) 
Dropshadow(offx=-1,offy=0,color=#ffffff) 
Dropshadow(offx=0,offy=-1,color=#ffffff);
}

Dieser Effekt wird mithilfe von CSS erreicht. Gewöhnliche Schattenfilter erzeugen nur eine Projektion in eine Richtung. Hier werden vier Projektionsrichtungen definiert, sodass ein Stricheffekt erzeugt wird.

<p style="font-size:12px;height:12px;color:white;filter:glow(color=black,strength=1);">Text描边字</p>