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>
다음 섹션