안규 공부방

Javascript & JQuery & CSS > text-shadow - h-shadow v-shadow blur-radius color|none|initial|inherit;

등록일 : 2017-07-14 17:46 조회수 : 93,693

text-shadow 속성은 글씨의 그림자를 표현하는 속성입니다.

사용방법은 아래와 같습니다.

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

--------------------------------------------------------------------------------

h-shadow : (필수입력) 그림자의 가로 위치입니다. 양수로 입력하면 기준이 되는 텍스트의 오른쪽으로 위치하고,
 음수로 입력하면 텍스트의 왼쪽으로 그림자가 나타납니다.

v-shadow : (필수입력) 그림자의 세로 위치입니다. 양수로 입력하면 텍스트의 아래쪽으로 위치하고,
 음수로 입력하면 텍스트의 위쪽으로 그림자가 나타납니다.

blur-radius : (선택입력) 번짐 반경. 디폴트 값은 0이고, 숫자가 커질 수록, 그림자의 번짐 정도가 커집니다.
 다시 말해, 숫자가 클 수록 그림자의 경계가 더욱 흐리게 보입니다.

color : (선택입력) 그림자의 색. 디폴트 값은 text의 color값을 상속 받습니다.
 #RRGGBB / rgb(r, g, b) / rgba(r, g, b, a) / hsl / hsla 등이 있습니다. hsl / hsla 는 적용되는 것에 한계가 있으니 따로 알아보세요.
 그리고 바로 색 이름을 넣을 수 있는 건 http://www.w3schools.com/colors/colors_names.asp 여기서 확인하실 수 있습니다.

none : text-shadow 값을 입력하지 않았을 경우 디폴트로 적용됩니다. 그림자가 없습니다.

initial : 디폴트 값으로 설정하는 건데, 사용하지 않으시는 게 좋습니다. IE에서는 잘 적용이 되지 않을 뿐더러,
 다른 페이지에도 영향을 줄 수 있습니다.

inherit : 부모 요소의 값을 상속. 이것도 상속이 되는 속성이 있고, 되지 않는 속성이 있고 골치 아파서 비추.
 그냥 auto라던가 각 속성을 따로 지정해 주는 게 마음이 편합니다.

 

안녕하세요 Hello TEXT-SHADOW.
안녕하세요 TEXT-SHADOW.
안녕하세요 TEXT-SHADOW.
안녕하세요 TEXT-SHADOW.
안녕하세요 TEXT-SHADOW.
안녕하세요 TEXT-SHADOW.
 
※ 혹시 도움이 되셨다면 댓글에 한마디 남겨주세요!
작성자   비밀번호
자동글 방지     (자동글 방지 기능입니다.)
내용   댓글달기 
이메일 문의 : cak0280@nate.com  
Copyright 2000 By ENTERSOFT.KR All Rights Reserved.