CSS3 텍스트 그림자 텍스트 그림자

CSS3 text-shadow 속성 사용법에 대한 자세한 설명:
이전에 텍스트의 그림자 효과를 설정하는 경우 일반적으로 다음과 같은 다른 도구가 필요합니다. Photoshop을 사용하여 반응형 이미지를 만드는 것은 단순히 CSS를 사용하여 달성하기 어렵습니다. 이제 CSS3는 이전에는 불가능했던 효과를 얻을 수 있는 텍스트 그림자 속성을 제공합니다.
문법 구조:

다른 튜토리얼에서는 문법 구조가 다른 형식으로 작성되었습니다. 즉, 모두 동일한 의미를 표현하므로 가장 이해하기 쉬운 것을 선택합니다.

text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...

구문 참고 사항:
1. 색상: 그림자의 색상 값을 나타냅니다.
2.x축: 수평 오프셋, 단위는 픽셀입니다.
3.y축: 수직 방향 오프셋, 단위는 픽셀입니다.
4. 흐림 반경: 그림자의 영향 범위입니다. 값이 클수록 흐릿해집니다.
위 문법 구조의 키워드 순서는 두 번째 형식을 가질 수도 있습니다:

text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...

그림자의 색상은 앞이나 끝에 있을 수 있습니다.
코드 예:
x축 오프셋 데모:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://ask.php.cn/" /> 
<title>php中文网</title> 
<style type="text/css"> 
div{ 
  text-shadow:green 300px 0px 0px; 
  font-size:80px; 
} 
</style> 
</head> 
<body> 
<div>php中文网</div>
</body> 
</html>

위 코드는 텍스트의 가로 오프셋을 300px로 설정하고 그림자를 색상은 녹색입니다.
Y축 오프셋 데모:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
  text-shadow:green 0px 60px 1px;
  font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>

위 코드는 텍스트의 세로 오프셋을 60px로, 그림자 색상을 녹색으로 설정할 수 있습니다.
전체 코드 데모:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
  text-shadow:green 10px 20px 5px;
  font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>

다중 레이어 그림자:
소위 다중 레이어 참조는 그림자 스타일을 코드에 적용하는 것입니다. 텍스트를 입력한 다음 쉼표로 구분하세요.
코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
  text-shadow:green 5px 10px 5px,blue 8px 10px 6px;
  font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本阴影</title> <style type="text/css"> .demo { width: 340px; padding: 30px; font: bold 55px/100% "微软雅黑"; color: #566F89; background: #000; text-shadow: 3px 2px 5px hsl(300,100%,50%); } </style> </head> <body> <div class="demo">PHP中文网</div> </body> </html>

제출하다 코드 재설정

자동운전