経験: css フィルター効果は見栄えが良く、使いやすいですが、サポートされていないため、web ページ制作には実用的ではありません。 ff および ie6。アーティストは、技術的な内容が減少するため、web ページの制作では使用しないことをお勧めします。
方法 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>