집 > 기사 > 웹 프론트엔드 > CSS3 텍스트 그림자 글꼴 그림자를 사용하는 방법

CSS3 텍스트 그림자 글꼴 그림자를 사용하는 방법

php中世界最好的语言원래의: 2017-11-24 09:27:302190검색

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!