text-shadow 속성이 무엇인가요? text-shadow 속성에 대한 자세한 설명
- 云罗郡主원래의
- 2018-10-23 13:47:347997검색
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 속성에 대한 자세한 설명이 소개되어 있습니다. CSS 동영상 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 참고하세요.
위 내용은 text-shadow 속성이 무엇인가요? text-shadow 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!