テキスト ストローク効果を実現する CSS フィルター (FF および IE6 はサポートされていません)

WBOY
リリース: 2018-09-27 16:34:43
オリジナル
1787 人が閲覧しました

経験: 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>
ログイン後にコピー
ログイン後にコピー
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート