CSS에서 드롭 캡 효과를 얻는 방법은 무엇입니까? 의사 요소 + 플로팅 효과(코드 예)-CSS 튜토리얼-php.cn

CSS에서 드롭 캡 효과를 얻는 방법은 무엇입니까? 의사 요소 + 플로팅 효과(코드 예)

青灯夜游

풀어 주다： 2019-07-06 11:35:08

원래의

5243명이 탐색했습니다.

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>

로그인 후 복사

Rendering:

CSS에서 드롭 캡 효과를 얻는 방법은 무엇입니까? 의사 요소 + 플로팅 효과(코드 예)