CSS3는 text-shadow 속성을 사용하여 다양한 효과로 텍스트 스타일 표시를 구현합니다.-HTML 튜토리얼-php.cn

CSS3는 text-shadow 속성을 사용하여 다양한 효과로 텍스트 스타일 표시를 구현합니다.

WBOY

풀어 주다： 2016-08-10 08:49:39

원래의

1581명이 탐색했습니다.

1. 효과 사진 표시:

오래전에 배운 텍스트 효과입니다. 하지만 여전히 매우 실용적이고 흥미롭습니다. CSS3에서 제공하는 text-shadow 속성을 사용하면 페이지의 텍스트에 그림자 효과를 추가할 수 있으므로 이전에 사용했던 일부 번거로운 이미지를 대체할 수 있습니다. 지금까지 Safari, FireFox, Chrome 및 Opera와 같은 주요 브라우저는 모두 이 기능을 지원합니다.

2. CSS3의 text-shadow 속성을 소개합니다

text-shadow 속성은 페이지의 텍스트에 그림자 효과를 추가할 수 있습니다.

text-shadow:none|none|[,]*

text-shadow:none|[,]*

text-shadow 속성의 초기 값은 None이며 모든 요소에 적용됩니다.

색상: 색상을 나타냅니다

길이: 부동 소수점 숫자와 단위 식별자로 구성된 길이 값을 나타내며 음수 값일 수 있으며 그림자의 수평 확장 거리를 지정합니다.

위 기본 구문이 이해가 안 되신다면 아래 예시를 참고해주세요

<span style="color: #800000;"><style type="text/css">
    p</span>{<span style="color: #ff0000;">
        text-shadow</span>:<span style="color: #0000ff;">0.1em 0.1em 0.3em #333333</span>;
    }<span style="color: #800000;">
</style></span>

로그인 후 복사

text-shadow 속성의 첫 번째 값은 수평 변위를 나타내고, 두 번째 값은 수직 변위를 나타내며, 양수 값은 오른쪽 또는 아래쪽, 음수 값은 왼쪽 또는 위쪽, 세 번째 값은 흐림 반경(이 값은 선택 사항)이고, 네 번째 값은 그림자의 색상을 나타내며(이 값은 선택 사항), 이 색상 값은 그림자 효과의 길이 값 앞이나 뒤에 배치될 수 있습니다. 색상을 지정하지 않으면 색상 속성 값이 대신 사용됩니다.

text-shadow 속성은 요소의 텍스트에 적용할 그림자 효과의 쉼표로 구분된 목록을 허용합니다. 그림자 효과는 주어진 순서대로 적용되기 때문에 서로 가릴 수는 있지만 텍스트 자체는 가릴 수 없습니다. 그림자 효과는 테두리의 크기를 변경하지 않지만 테두리를 넘어 확장될 수 있습니다. (이 예에서 p 태그의 패딩 스타일을 삭제해 보면 불꽃 효과 텍스트의 그림자가 경계를 초과하는 것을 볼 수 있습니다.)

3. 텍스트 그림자 효과 코드는 다음과 같습니다

주로 사용되는 것은 text-shadow의 섀도우 리스트이며, 합리적인 컬러 매칭을 통해 원하는 효과를 얻을 수 있습니다.

<span style="color: #800000;"><style type="text/css">
        p</span>{<span style="color: #ff0000;">
            font-size</span>:<span style="color: #0000ff;">5em</span>;<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;">5px</span>;<span style="color: #ff0000;">
            padding</span>:<span style="color: #0000ff;">20px</span>;<span style="color: #ff0000;">
            display</span>:<span style="color: #0000ff;"> inline-block</span>;
        }<span style="color: #800000;">
        .p1</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
        .p2</span>{<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;">black</span>;<span style="color: #ff0000;">
            text-align</span>:<span style="color: #0000ff;">left</span>;<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
        .p3</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> -1px -1px white,1px 1px #333</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#D1D1D1</span>;<span style="color: #ff0000;">
            font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
        .p4</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 1px 1px white,-1px -1px #333</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#D1D1D1</span>;<span style="color: #ff0000;">
            font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
        .p5</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> -1px 0 black,0 1px black,1px 0 black,0 -1px black</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#ffffff</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
        .p6</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 0 0 0.2em #F87,0 0 0.2em #f87</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#d1d1d1</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
    </style></span>

로그인 후 복사

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p1"</span><span style="color: #0000ff;">></span>多色阴影效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p2"</span><span style="color: #0000ff;">></span>火焰效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p3"</span><span style="color: #0000ff;">></span>立体凸起效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p4"</span><span style="color: #0000ff;">></span>立体凹下效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p5"</span><span style="color: #0000ff;">></span>描边效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p6"</span><span style="color: #0000ff;">></span>外发光效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

로그인 후 복사

text-shadow 속성을 합리적으로 사용하면 페이지에서 복잡한 정적 이미지 리소스를 로드하지 않아도 되는 간단한 특수 텍스트 효과를 얻을 수 있습니다.

마지막으로 읽어주셔서 감사합니다.