1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
---
title: text-shadow
slug: Web/CSS/text-shadow
tags:
- CSS
- Reference
translation_of: Web/CSS/text-shadow
---
<div>{{CSSRef}}</div>
<p><code><strong>text-shadow</strong></code> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 설명됩니다.</p>
<p>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</p>
<h2 id="Syntax" name="Syntax">구문</h2>
<pre><code>/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;</code></pre>
<p>This property is specified as a comma-separated list of shadows.</p>
<p>Each shadow is specified as two or three <code><length></code> values, followed optionally by a <code><color></code> value. The first two <code><length></code> values are the <code><offset-x></code> and <code><offset-y></code> values. The third, optional, <code><length></code> value is the <code><blur-radius></code>. The<code><color></code> value is the shadow's color.</p>
<p>When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.</p>
<p>This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first-letter")}} <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>.</p>
<h3 id="Values" name="Values">값</h3>
<dl>
<dt>{{cssxref("<color>")}}</dt>
<dd>선택값(생략가능). 위치값(offset)이전/이후에 설정이 가능하다. 색상(color)값이 설정되지 않으면, 브라우저 기본값(UA-chosen color)이 사용된다. {{ note("만약 다양한 브라우저에서 동일하게 표현하고 싶다면, 특정 색상(color)을 지정할 것.") }}</dd>
<dt><code><offset-x> <offset-y></code></dt>
<dd>Required. These {{cssxref("<length>")}} values specify the shadow's distance from the text. <code><offset-x></code> specifies the horizontal distance; a negative value places the shadow to the left of the text. <code><offset-y></code> specifies the vertical distance; a negative value places the shadow above the text. If both values are <code>0</code>, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <code><blur-radius></code>.</dd>
<dt><code><blur-radius></code></dt>
<dd>Optional. This is a {{cssxref("<length>")}} value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to <code>0</code>.</dd>
<dt>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<h3 id="Simple_shadow">Simple shadow</h3>
<pre><code>.red-text-shadow {
text-shadow: red 0 -2px;
}</code></pre>
<pre><code><p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p></code></pre>
<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
<h3 id="Multiple_shadows">Multiple shadows</h3>
<pre><code>.white-text-with-blue-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, serif;
}</code></pre>
<pre><code><p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p></code></pre>
<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p>
<h2 id="Specifications">Specifications</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Specifies <code>text-shadow</code> as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>The CSS property <code>text-shadow</code> was <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
</tr>
</tbody>
</table>
<p id="Syntax">{{cssinfo}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
<p>{{Compat("css.properties.text-shadow")}}</p>
<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3>
Gecko has a bug whereby {{cssxref("transition")}}s will not work when transitioning from a <code>text-shadow</code> with a color specified to a <code>text-shadow</code> without a color specified ({{bug(726550)}}). This has been fixed in Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57).
<h2 id="See_also">See also</h2>
<a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - An interactive text shadow CSS generator. {{cssxref("box-shadow")}} The {{cssxref("<color>")}} data type (for specifying the shadow color) <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt>
</dl>
|
