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

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

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

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

관련 읽기:

넘치는 DIV의 내용을 숨기는 방법

CSS 레이아웃 기술은 무엇입니까

CSS에서 글꼴 스타일을 설정하는 방법

위 내용은 CSS3 텍스트 그림자 글꼴 그림자를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.