filter: drop-shadow()

Ví dụ

Ví dụ cơ bản

Sử dụng các tiện ích như drop-shadow-sm và drop-shadow-xl để thêm drop shadow vào một phần tử:

<svg class="drop-shadow-md ...">  <!-- ... --></svg><svg class="drop-shadow-lg ...">  <!-- ... --></svg><svg class="drop-shadow-xl ...">  <!-- ... --></svg>

Điều này hữu ích để áp dụng bóng cho các hình dạng không đều, như văn bản và các phần tử SVG. Để áp dụng bóng cho các phần tử thông thường, bạn có thể muốn sử dụng box shadow thay thế.

Thay đổi độ mờ (opacity)

Sử dụng opacity modifier để điều chỉnh độ mờ của drop shadow:

<svg class="fill-white drop-shadow-xl ...">...</svg><svg class="fill-white drop-shadow-xl/25 ...">...</svg><svg class="fill-white drop-shadow-xl/50 ...">...</svg>

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

Đặt màu bóng

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

<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg><svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>

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ỏ drop shadow

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

<svg class="drop-shadow-lg dark:drop-shadow-none">  <!-- ... --></svg>

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

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

<svg class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">  <!-- ... --></svg>

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

<svg class="drop-shadow-(--my-drop-shadow) ...">  <!-- ... --></svg>

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

Responsive design

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

<svg class="drop-shadow-md md:drop-shadow-xl ...">  <!-- ... --></svg>

Learn more about using variants in the variants documentation.

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

Tùy chỉnh drop shadows

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

@theme {  --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }

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

<svg class="drop-shadow-3xl">  <!-- ... --></svg>

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 drop-shadow-regal-blue utility can be used in your markup:

<svg class="drop-shadow-regal-blue">  <!-- ... --></svg>

Learn more about customizing your theme in the theme documentation.