CSS에서 글꼴 흰색 획을 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 글꼴 흰색 획을 설정하는 방법

青灯夜游

풀어 주다： 2023-02-06 19:19:06

원래의

10446명이 탐색했습니다.

CSS에서 글꼴의 흰색 획을 설정하는 방법: 1. text-Stroke 속성을 사용하여 텍스트의 획 너비와 색상을 설정합니다. 구문 형식은 "text-Stroke: 3px #fff;"입니다. text-shadow 속성을 사용하여 글꼴 주위에 흰색 그림자를 추가하여 획 효과를 만듭니다.

CSS에서 글꼴 흰색 획을 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css 글꼴 흰색 획 설정

1. text-Stroke 속성 사용

text-Stroke 속성은 텍스트에 획을 추가하는 데 사용됩니다. 이 속성을 사용하여 텍스트의 획 너비와 색상을 변경할 수 있습니다. 이 속성은 -webkit- 접두사를 사용하여 지원됩니다.

텍스트 획은 텍스트 획 너비와 텍스트 획 색상(텍스트 채우기 색상)의 약어입니다.

구문:

text-stroke: <width> <color>;

로그인 후 복사

매개변수:

width: 텍스트의 획 두께 설정
color: 텍스트의 획 색상 설정

CSS에서 글꼴 흰색 획을 설정하는 방법

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			@import url(https://fonts.googleapis.com/css?family=Bangers);
			body {
				font-size: 50%;
				line-height: 1;
				background: palevioletred;
			}
			
			h1 {
				font: 8em/1 Bangers, sans-serif;
				-webkit-text-stroke: 3px #fff; 
				color:black;
			}
		</style>
	</head>

	<body>
		<h1>Hello World</h1>
	</body>

</html>

로그인 후 복사

렌더링 중 :

CSS에서 글꼴 흰색 획을 설정하는 방법

2. text-shadow 속성을 사용합니다.

text-shadow: 텍스트에 그림자를 설정합니다.

text-shadow:color||length||length||opacity。

로그인 후 복사

color: 색상을 지정합니다.
길이: 첫 번째 길이는 수평 방향의 그림자 확장 거리를 지정하고, 두 번째 길이는 수직 방향의 그림자 확장 거리를 지정하며 음수 값일 수 있습니다.
opacity: 그림자 흐림 효과의 거리를 지정합니다.

쉼표로 구분된 4개의 속성 값으로 표시되는 방향 순서는 오른쪽 아래, 왼쪽 위입니다.

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>text-shadow-文字描边</title>
		<style>
			.demo {
				height: 200px;
				text-align: center;
				font-family: Verdana;
				font-size: 30px;
				font-weight: bold;
				background: peru;
				color: #000;
			}
			
			.stroke {
				text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>没有添加描边</p>
			<p class="stroke">添加了字体描边</p>
		</div>
	</body>

</html>

로그인 후 복사

렌더링:

CSS에서 글꼴 흰색 획을 설정하는 방법