CSS3을 사용하여 텍스트의 단일 그림자 효과 및 다중 그림자 효과를 얻는 방법(전체 코드 첨부)-CSS 튜토리얼-php.cn

CSS3을 사용하여 텍스트의 단일 그림자 효과 및 다중 그림자 효과를 얻는 방법(전체 코드 첨부)

坏嘻嘻

풀어 주다： 2018-09-28 11:54:08

원래의

4989명이 탐색했습니다.

최근에는 웹페이지 개발 과정에서 인간과 컴퓨터의 상호 작용과 사용자 경험에 대한 관심이 점점 더 높아지고 있습니다. 색상이 더욱 다양해질 뿐만 아니라 다양한 특수 효과도 현기증을 내고 있습니다. 오늘은 텍스트에서 그림자의 특수 효과를 얻는 방법을 주로 소개하겠습니다. 참고할만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

텍스트 그림자 효과를 얻기 위해 CSS3를 사용하는 원리

그림자 효과를 얻기 위해 CSS3 그림자 속성과 호환되기를 원할 경우 W3C 표준에 따라 주로 text-shadow 속성을 사용합니다. IE에서는 ie.css3-htc를 사용할 수 있지만 표준 Internet Explorer 9 및 이전 브라우저에 따르면 현재 text-shadow 속성을 지원하지 않습니다. 가장 기본적인 구문은 다음과 같습니다. text-shadow: h-shadow v-shadow 흐림 색상

text-shadow 속성 설정

수평 오프셋, 오른쪽은 양수 값, 왼쪽은 음수 값입니다.
수직 오프셋, 양수 값은 아래쪽, 음수 값은 위쪽입니다.
흐릿하며 음수일 수 없습니다.
그림자 색상.
text-shadow 속성에는 텍스트 글로우 효과를 얻는 또 다른 기능이 있습니다. 자세한 내용은 이 사이트의 다른 기사를 참조하세요.

css3를 사용하여 글꼴 내에서 광선 효과를 얻는 방법(자세한 설명)

css3을 사용하여 텍스트의 단일 그림자 만들기

<!DOCTYPE html>
<html>
<head>
    <title>单个阴影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        ul>li:nth-child(odd) {
            text-shadow: 2px 2px 1px red;
        }
    </style>
</head>
<body>
    <ul>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
    </ul>
</body>
</html>

로그인 후 복사

효과는 그림과 같습니다.

CSS3을 사용하여 텍스트의 단일 그림자 효과 및 다중 그림자 효과를 얻는 방법(전체 코드 첨부) 요약: text-shadow 속성은 텍스트에 그림자 효과를 줄 수 있을 뿐만 아니라, 설정을 쉼표로 구분하면 여러 그림자 효과도 만들 수 있는데, 이는 일상적인 프런트엔드 개발에 매우 실용적입니다. 이미지에 그림자 효과를 추가하는 방법과 다음 기사에서 text-shadow 속성을 사용하는 방법을 설명하므로 빛나는 텍스트 등의 효과를 만들어 보십시오. 계속 지켜봐 주시기 바랍니다.