CSS3でフォントリフレクションを実装する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3でフォントリフレクションを実装する方法

藏色散人

Dec 16, 2020 am 09:46 AM

css3

css3 でフォントリフレクションを実装する方法: まず HTML サンプルファイルを作成し、次にテキストを定義し、指定されたテキストに「box-reflect」属性を追加してフォントリフレクションを実現します。

CSS3でフォントリフレクションを実装する方法

このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: 「css ビデオチュートリアル」

フォントリフレクションを実現する css3

#CSS では、主に box-reflect が使用されます。フォントの反射効果を実現するためにプロパティを使用しました。

box-reflect プロパティは、主にオブジェクトの反射を設定または取得するために使用されます。

box-reflect syntax

box-reflect：none | <direction> <offset>? <mask-box-image>?

この属性は W3C 標準属性ではないため、使用する場合はブラウザのプライベート属性を追加する必要があります。ブラウザの互換性に従って、ボックスを使用してください-reflect の場合、-webkit プレフィックスを追加する必要があります:

-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
 box-reflect：none | <direction> <offset>? <mask-box-image>?

この属性は Firefox ではサポートされていません。Firefox では、-moz-element() を使用して

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> html,body{ margin:50px 0; } .reflect{ width:950px; margin:0 auto; -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3)); font:bold 100px/1.231 georgia,sans-serif; text-transform:uppercase; } </style> </head> <body> <div>你看到倒影了么？</div> </body> </html>

1 をシミュレートできます。 Direction は方向を定義します。値には上、下、左、右が含まれます。

above: オブジェクトの上にある反射を指定します。

below: オブジェクトの下にある反射を指定します。

left: オブジェクトの左側にある反射を指定します。オブジェクト

right: オブジェクトの右側にある反射を指定します。

2。オフセットは、反射オフセットの距離を定義します。値には数値またはパーセンテージが含まれます。パーセンテージはオブジェクトのサイズに応じて決定されます。デフォルトは 0 です。

長さの値を使用して、反射とオブジェクトの間の距離を定義します。マイナスになることもあります。反射とオブジェクトの間の距離をパーセンテージで定義します。マイナスになることもあります。

3.mask-box-image は、投影領域をカバーするマスクイメージを定義します。このパラメータ値を省略した場合、デフォルトでマスクされていないイメージが使用されます。

値:

none: マスクイメージなし:

絶対アドレスまたは相対アドレスを使用してマスクイメージを指定します。

線形グラデーションを使用してマスクイメージを作成します。

放射状(放射状)グラデーションを使用してマスク画像を作成します。

繰り返し線形グラデーションを使用してバックマスクイメージを作成します。

繰り返し放射状(放射状)グラデーションを使用してマスクイメージを作成します。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,body{
  margin:50px 0;
}
.reflect{
  width:950px;
  margin:0 auto;
  -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
  font:bold 100px/1.231 georgia,sans-serif;
  text-transform:uppercase;
}
</style>
</head>
<body>
<div>你看到倒影了么？</div>
</body>
</html>

レンダリング:

CSS3でフォントリフレクションを実装する方法

以上がCSS3でフォントリフレクションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。（「正しいと感じる」までファイルを移動するだけです笑）。真実

非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。