text-shadow 속성이 무엇인가요? text-shadow 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

text-shadow 속성이 무엇인가요? text-shadow 속성에 대한 자세한 설명

云罗郡主

풀어 주다： 2018-10-23 13:48:26

원래의

8047명이 탐색했습니다.

CSS를 배운 후 많은 학생들은 특정 텍스트 줄의 그림자 효과를 원합니다. 아티스트의 경우 CSS 스타일에서 CSS의 text-shadow 태그를 사용하여 그림자 효과를 얻을 수 있습니다. 텍스트 그림자 텍스트- 그림자 속성은 무엇입니까? text-shadow 속성을 요약해 보겠습니다.

text-shadow 속성 구문

text-shadow:x-offset  y-offset  blur  color;

로그인 후 복사

위 코드 문자열에 대한 자세한 설명:

x-offset은 수평 그림자를 나타내며 수평 오프셋 위치를 나타냅니다. x-offset의 단위는 px이며 다음과 같이 표현할 수도 있습니다. x인 경우 -offset 값이 양수이면 나타나는 그림자가 오른쪽으로 이동한다는 의미입니다. x-offset 값이 음수인 경우 그림자가 왼쪽으로 이동한다는 의미입니다.

y-offset은 수직 그림자를 나타내며, y-offset의 단위도 x-offset과 동일합니다. y-offset이 음수 값을 가지면 위쪽으로 이동한다는 의미입니다. 상향 이동.

blur는 그림자의 흐림 정도를 나타내는데 가장 중요한 점은 음수 값이 있을 수 없고 양수 값만 있을 수 있다는 점입니다. 흐림 값이 클수록 흐려지고 작을수록 선명해집니다. . 블러를 설정하고 싶지 않다면 블러를 0으로 설정하고

color는 그림자의 색상을 나타냅니다.

구체적인 예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        #lvye
        {
            font-size:40px;
            text-shadow:4px 4px 2px gray;
            -webkit-text-shadow: 4px 4px 2px gray;
            -moz-text-shadow: 4px 4px 2px gray;
        }
    </style>
</head>
<body>
    <div id="lvye">php中文网</div>
</body>
</html>

로그인 후 복사

위 코드가 브라우저에 표시되는 효과는 다음과 같습니다.

text-shadow 속성이 무엇인가요? text-shadow 속성에 대한 자세한 설명