CSS3의 text-shadow 스타일은 원래 CSS2에 있던 속성을 CSS3의 텍스트 그림자를 다시 적용한 것이므로 text-shadow 사용법을 살펴보겠습니다.
CSS3 단어:
text-shadow
문법 구조
div{text-shadow:5px 2px 6px #000;}
div 상자의 텍스트 그림자 효과를 왼쪽에서 5px, 위쪽에서 2px로 설정합니다. 그림자 효과 표시를 시작하려면 그림자 크기 범위를 6px로 설정하고 그림자 색상을 검정색(#000)으로 설정하세요.
텍스트 표시 그림자 효과에는 4가지 값이 있습니다. 첫 번째 값은 왼쪽에서 그림자 효과 표시가 시작되는 거리를 나타내고, 두 번째 값은 왼쪽에서 그림자 효과 표시가 시작되는 거리를 나타내고, 세 번째 값은 그림자 범위의 크기를 나타내며, 네 번째 값은 그림자 효과 색상입니다.
Case HTML code
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>字体阴影 在线演示</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>我阴影文字</div> <div class="txt">文字阴影测试内容1</div> <div class="txt2">文字阴影测试内容2</div> </body> </html>
해당 CSS 코드:
.txt {text-shadow:5px 1px 6px #F93 }
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}위는 CSS3에서 text-shadow를 사용하는 방법입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
위 내용은 CSS3 텍스트 그림자 글꼴 그림자를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
