텍스트 그림자를 구현하는 CSS 메서드(코드 예)
- 不言원래의
- 2018-11-12 09:59:153125검색
CSS는 많은 효과를 얻을 수 있으므로 이 기사에서는 CSS를 사용하여 텍스트 그림자를 표시하는 코드를 소개합니다. CSS에서 텍스트 그림자를 구현하는 데 사용하는 속성은 구체적인 내용을 살펴보겠습니다.
구문 형식:
text-shadow: (x 방향 거리) (y 방향 거리) (흐림 크기) (그림자 색상);
쉼표를 사용하여 여러 그림자를 구분할 수도 있습니다. (관련 권장 사항: CSS3 온라인 매뉴얼)
텍스트 그림자: (그림자 1 x 방향 거리) (그림자 1 y 방향 거리) (그림자 1 흐림 크기) (그림자 1 색상), (그림자 2 x 방향 거리) (그림자 2 y- 방향 거리) ) (음영 2 흐림) (음영 2 색상),..., (음영 nx 방향 거리) (음영 n 흐림 크기) (음영 n 색상)
예:
text-shadow: 2px 2px 1px #808080;
text-shadow: 4px 6px 2px blue;
text-shadow: 3px 3px 1px gray, 8px -6px 2px #30E0C0;
코드 예 :
예제 1:
다음 CSS, HTML 파일을 만듭니다.
TextShadow.css
p.ShadowText{
text-shadow: 5px 5px 2px #808080;
}TextShadow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TextShadow.css" />
<title></title>
</head>
<body>
<p class="ShadowText">文字阴影效果</p>
</body>
</html>결과 표시
웹 브라우저에 위 HTML 파일이 표시되면 아래와 같은 효과가 표시됩니다.
예 2:
다음 CSS, HTML 파일을 만듭니다.
TextShadow.css
p.ShadowText2 {
font-size:18px;
font-weight:700;
text-shadow: 2px 2px 1px #E0E0E0;
}TextShadow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TextShadow.css" />
<title></title>
</head>
<body>
<p class="ShadowText2">文字阴影效果</p>
</body>
</html>결과 표시
웹 브라우저에 위 HTML 파일이 표시되면 아래와 같은 효과가 표시됩니다
예 3: 여러 개의 그림자를 표시하는 경우
만들기 다음 CSS, HTML 파일.
TextShadow.css
p.ShadowText3 {
font-size: 24px;
font-weight: 700;
text-shadow: 8px 8px 1px #A0A0A0, 24px 24px 6px #A0A0F0;
}TextShadow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TextShadow.css" />
<title></title>
</head>
<body>
<p class="ShadowText3">文字阴影效果</p>
</body>
</html>결과 표시
웹 브라우저가 위의 HTML 파일을 표시하면 아래에 표시된 효과가 표시됩니다
예 4: 추가 그림자
다음을 만듭니다. CSS, HTML 파일.
TextShadow.css
p.ShadowText4 {
font-size: 24px;
font-weight: 700;
text-shadow: 8px 8px 1px #A0A0A0, 24px 24px 6px #A0A0F0, 36px 36px 2px #ff6a00, 48px 24px 2px #99ff70;
}TextShadow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TextShadow.css" />
<title></title></head><body>
<p class="ShadowText4">文字阴影效果</p>
</body>
</html>결과 표시
웹 브라우저에 위 HTML 파일이 표시되면 아래와 같은 효과가 표시됩니다.
위 내용은 이 기사의 전체 내용입니다. CSS에 대한 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 CSS3 Video Tutorial 칼럼을 주목하세요! ! !
위 내용은 텍스트 그림자를 구현하는 CSS 메서드(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!