☰

テキストにアウトライン効果を適用する 質問する

tag-icon • tag-icon css
テキストにアウトライン効果を適用する 質問する

CSS でテキストに異なる色のアウトラインを付ける方法はありますか? 名前やリンクなど、テキストの一部をハイライトして、より直感的に表示したいです。リンクの色の変更などは最近では一般的なので、何か新しいものが欲しいです。

ベストアンサー1

実験的なWebkitプロパティがありますtext-strokeCSS3 では、しばらくの間これを機能させようと試みてきましたが、これまでのところ成功していません。

代わりに私がやったことは、すでにサポートされているtext-shadowプロパティ (Chrome、Firefox、Opera、IE 9 でサポートされていると思います)。

4 つの影を使用して、ストロークされたテキストをシミュレートします。

.strokeme {
  color: white;
  background-color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="strokeme">
  This text should have a stroke in some browsers
</div>

デモを作りましたあなたのためにここに

そしてホバーした例はこちらから入手可能

Jason C がコメントで述べたように、text-shadowCSS プロパティは現在、Opera Mini を除くすべての主要ブラウザでサポートされています。このソリューションが下位互換性のために機能する場合は (自動更新されるブラウザに関しては実際には問題ではありません)、CSS をtext-stroke使用する必要があると思います。

おすすめ記事