CSSでドロップキャップ効果を実現するにはどうすればよいですか?擬似要素+フローティングエフェクト（コード例）-CSSチュートリアル-php.cn

CSSでドロップキャップ効果を実現するにはどうすればよいですか?擬似要素+フローティングエフェクト（コード例）

青灯夜游

リリース： 2019-07-06 11:35:08

オリジナル

5201 人が閲覧しました

Word 文書にはドロップキャップ機能があり、記事のレイアウトに使用すると記事に彩りを加えることができます。では、CSS はそのような効果を実現できるのでしょうか?この記事では、CSS がどのようにドロップキャップ効果を実現するかを紹介し、CSS 擬似要素を使用してフローティングしてドロップキャップ効果を実現する方法を理解できるようにします。困っている友人は参考にしていただければ幸いです。

CSS では、疑似要素::first-letter を通じてドロップキャップ効果を実現できます。実装原理は非常に単純です。つまり、最初の文字のフォントサイズの値をより大きな値に設定し、float を使用してそれを実装します。

簡単なコード例を通じて、CSS がドロップキャップ効果を実現する方法を見てみましょう。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首字下沉</title>
		<style>
			p::first-letter{
				color: #c69c6d;
				font-size: 2em;
				float:left;
				margin: 0 .2em 0 0;
			}
		</style>
	</head>
	<body>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでドロップキャップ効果を実現するにはどうすればよいですか?擬似要素+フローティングエフェクト（コード例）

上記の例では、最初の単語の効果のみを実現する必要がある場合、すべての段落の最初の単語が削除されます。特定の段落の、これも他のセレクターで実装する必要があります。ここで、最初の段落のドロップキャップの実装を見てみましょう:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首字下沉</title>
		<style>
			p:first-child::first-letter{
				color: #c69c6d;
				font-size: 2em;
				float:left;
				margin: 0 .2em 0 0;
			}
		</style>
	</head>
	<body>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでドロップキャップ効果を実現するにはどうすればよいですか?擬似要素+フローティングエフェクト（コード例）