text-shadow

Ví dụ

Ví dụ cơ bản

Sử dụng các tiện ích như text-shadow-sm và shadow-lg để áp dụng các kích thước bóng văn bản khác nhau cho một phần tử văn bản:

<p class="text-shadow-2xs ...">The quick brown fox...</p><p class="text-shadow-xs ...">The quick brown fox...</p><p class="text-shadow-sm ...">The quick brown fox...</p><p class="text-shadow-md ...">The quick brown fox...</p><p class="text-shadow-lg ...">The quick brown fox...</p>

Thay đổi độ mờ (opacity)

Sử dụng opacity modifier để điều chỉnh độ mờ của bóng văn bản:

<p class="text-shadow-lg ...">The quick brown fox...</p><p class="text-shadow-lg/20 ...">The quick brown fox...</p><p class="text-shadow-lg/30 ...">The quick brown fox...</p>

Độ mờ mặc định của bóng văn bản khá thấp (20% hoặc ít hơn), vì vậy việc tăng độ mờ (ví dụ lên 50%) sẽ làm cho bóng văn bản rõ ràng hơn.

Đặt màu bóng

Sử dụng các tiện ích như text-shadow-indigo-500 và text-shadow-cyan-500/50 để thay đổi màu của bóng văn bản:

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button><button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>

Theo mặc định, bóng màu có độ mờ là 100% nhưng bạn có thể điều chỉnh điều này bằng cách sử dụng opacity modifier.

Loại bỏ bóng văn bản

Sử dụng tiện ích text-shadow-none để loại bỏ bóng văn bản hiện có khỏi một phần tử:

<p class="text-shadow-lg dark:text-shadow-none">  <!-- ... --></p>

Sử dụng giá trị tùy chỉnh

Use the text-shadow-[<value>] syntax to set the text shadow based on a completely custom value:

<p class="text-shadow-[0_35px_35px_rgb(0_0_0_/_0.25)] ...">  Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the text-shadow-(<custom-property>) syntax:

<p class="text-shadow-(--my-text-shadow) ...">  Lorem ipsum dolor sit amet...</p>

This is just a shorthand for text-shadow-[var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a text-shadow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="text-shadow-none md:text-shadow-lg ...">  Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

Tùy chỉnh theme của bạn

Tùy chỉnh bóng văn bản

Use the --text-shadow-* theme variables to customize the text shadow utilities in your project:

@theme {  --text-shadow-xl: 0 35px 35px rgb(0, 0, 0 / 0.25); }

Now the text-shadow-xl utility can be used in your markup:

<p class="text-shadow-xl">  Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.

Tùy chỉnh màu bóng

Use the --color-* theme variables to customize the color utilities in your project:

@theme {  --color-regal-blue: #243c5a; }

Now the text-shadow-regal-blue utility can be used in your markup:

<p class="text-shadow-regal-blue">  Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.