수

CSS3 그림자 효과

· 2017-08-11 (금) 15:59:28 · 2454

CSS3 그림자 효과


CSS3를 사용하면 텍스트와 요소에 그림자를 추가 할 수 있습니다.


이 장에서는 다음 속성에 대해 학습합니다.


1. text-shadow

2. box-shadow


6bdffa54a1ef08d61b8f06ccafeca4d2_1502434
 

CSS3 text-shadow속성은 텍스트에 그림자를 적용합니다.

가장 간단한 방법은 수평 그림자 (2px)와 수직 그림자 (2px) 만 지정하는 것입니다.

예)
h1 {
    text-shadow: 2px 2px;
}

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>

</body>
</html>

6bdffa54a1ef08d61b8f06ccafeca4d2_1502434
 

|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 17-08-23 조회 2,110
CSS 17-08-23 조회 2,129
CSS 17-08-22 조회 1,899
CSS 17-08-22 조회 2,207
CSS 17-08-22 조회 2,646
CSS 17-08-20 조회 2,258
CSS 17-08-20 조회 1,560
CSS 17-08-20 조회 1,784
CSS 17-08-18 조회 1,809
CSS 17-08-18 조회 1,929
CSS 17-08-18 조회 2,250
CSS 17-08-17 조회 2,550
CSS 17-08-17 조회 2,211
CSS 17-08-17 조회 2,183
CSS 17-08-16 조회 2,050
CSS 17-08-16 조회 1,834
CSS 17-08-16 조회 1,823
CSS 17-08-15 조회 2,031
CSS 17-08-15 조회 2,092
CSS 17-08-15 조회 1,914
CSS 17-08-11 조회 1,807
CSS 17-08-11 조회 2,455
CSS 17-08-11 조회 2,573
CSS 17-08-10 조회 1,918
CSS 17-08-10 조회 2,435
CSS 17-08-10 조회 2,235
CSS 17-08-09 조회 2,131
CSS 17-08-09 조회 2,563
CSS 17-08-09 조회 2,114
CSS 17-08-07 조회 2,372