ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS で Twitter のロゴのようにテキストに枠線を追加できますか?

CSS で Twitter のロゴのようにテキストに枠線を追加できますか?

Susan Sarandon
リリース: 2024-12-18 16:14:10
オリジナル
331 人が閲覧しました

Can CSS Add Borders to Text Like Twitter's Logo?

CSS フォントの境界線: 現実になりましたか?

CSS3 の領域では、境界線はまったく新しい次元になりました。 -webkit プレフィックスの出現により、次のような疑問が生じます: フォントに境界線を追加できるようになりましたか?

質問:

CSS/XHTML を利用して境界線を追加できますか?テキストの周りの境界線、Twitter のロゴの白い境界線に似ていますか?そうでない場合、Photoshop に頼らずにこの効果を実現する実行可能なハックはありますか?

答え:

実際、CSS は text-ストローク と呼ばれる実験的なプロパティを提供しています。特定のブラウザでは -webkit プレフィックスによって強化されます。

コード例:

次のコード スニペットは、テキスト ストロークの使用を示しています:

h1 {
    -webkit-text-stroke: 2px black;  /* width and color */

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>
ログイン後にコピー

以上がCSS で Twitter のロゴのようにテキストに枠線を追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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