Penapis CSS untuk mencapai kesan strok teks (FF dan IE6 tidak disokong)-tutorial css-php.cn

Penapis CSS untuk mencapai kesan strok teks (FF dan IE6 tidak disokong)

WBOY

Lepaskan： 2018-09-27 16:34:43

asal

1823 orang telah melayarinya

Pengalaman: Walaupun kesan penapis CSS cantik dan mudah digunakan, ia tidak sesuai untuk penghasilan halaman web kerana ia tidak menyokong FF dan IE6 Sebaik-baiknya artis tidak melakukannya gunakannya untuk penghasilan halaman web. Ini akan mengurangkan kandungan teknikal anda.

Kaedah 1:

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

Salin selepas log masuk

Kaedah 2:

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

Salin selepas log masuk

Kaedah 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>

Salin selepas log masuk

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

Salin selepas log masuk

.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);
}

Salin selepas log masuk

Kaedah 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);
}

Salin selepas log masuk

Kesan ini menggunakan css Penapis bayang digunakan untuk mencapai ini Penapis bayang biasa hanya akan menghasilkan unjuran dalam satu arah Di sini, empat arah unjuran ditakrifkan, jadi kesan strok dihasilkan.

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

Salin selepas log masuk