텍스트 획 효과를 얻기 위한 CSS 필터(FF 및 IE6은 지원되지 않음)

경험치: CSS 필터 효과가 아름답고 사용하기 쉽지만 FF와 IE6을 지원하지 않기 때문에 웹페이지 제작에는 적합하지 않습니다.아티스트에게는 그렇지 않은 것이 가장 좋습니다. 웹페이지 제작에 사용하면 기술적인 내용이 줄어듭니다.

방법 1:

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

방법 2:

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

방법 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);
}

방법 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);
}

이 효과는 CSS를 사용합니다. 이를 달성하기 위해 그림자 필터가 사용됩니다. 일반 그림자 필터는 한 방향으로만 투영을 생성합니다. 여기서는 투영 방향이 4개로 정의되어 스트로크 효과가 생성됩니다.

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