이번에는 CSS3의 text-shadowtext-shadow 속성을 사용하는 방법과 CSS3 text-shadow text-shadow를 사용할 때 주의사항이 무엇인지 보여드리겠습니다. 바라보다.
텍스트 그림자 속성 특수 효과:
1. 오른쪽 아래 모서리 그림자, 왼쪽 아래 모서리 그림자, 왼쪽 위 모서리 그림자, 오른쪽 위 모서리 그림자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style>
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>텍스트 그림자를 다음으로 변경하는 경우: text-shadow:-10px 10px #333, 왼쪽 하단에 그림자가 나타납니다
text-shadow를 text-shadow:-10px -10px #333으로 변경하면 왼쪽 상단에 그림자가 나타납니다
text-shadow를 text로 변경합니다. -shadow: 10px -10px #333 , 오른쪽 상단에 그림자가 나타납니다
2. text-shadow를 사용하여 3차원 텍스트 효과를 설정하세요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style>
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:-1px -1px #fff,
1px 1px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>이 사례를 읽으신 후에는 방법을 익히셨을 것입니다. 더 흥미로운 정보를 알고 싶으시면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!
관련 읽기:
에서 img와 범위를 세로로 가운데에 맞추는 방법위 내용은 CSS3의 text-shadow 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
