텍스트 그림자를 구현하는 CSS 메서드(코드 예)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

텍스트 그림자를 구현하는 CSS 메서드(코드 예)

不言

Nov 12, 2018 am 09:59 AM

텍스트 그림자

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 파일이 표시되면 아래와 같은 효과가 표시됩니다.

텍스트 그림자를 구현하는 CSS 메서드(코드 예)

예 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 파일이 표시되면 아래와 같은 효과가 표시됩니다

텍스트 그림자를 구현하는 CSS 메서드(코드 예)

예 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 파일을 표시하면 아래에 표시된 효과가 표시됩니다

텍스트 그림자를 구현하는 CSS 메서드(코드 예)

예 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 메서드(코드 예)