box-shadow

Ví dụ

Ví dụ cơ bản

Sử dụng các utility như shadow-sm và shadow-lg để áp dụng các kích thước box shadow bên ngoài khác nhau cho một phần tử:

<div class="shadow-md ..."></div><div class="shadow-lg ..."></div><div class="shadow-xl ..."></div>

Thay đổi độ mờ (opacity)

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

<div class="shadow-xl ..."></div><div class="shadow-xl/20 ..."></div><div class="shadow-xl/30 ..."></div>

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

Thiết lập màu shadow

Sử dụng các utility như shadow-indigo-500 và shadow-cyan-500/50 để thay đổi màu của box shadow:

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button><button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button><button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

Theo mặc định, các shadow có 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 modifier độ mờ.

Thêm inset shadow

Sử dụng các utility như inset-shadow-xs và inset-shadow-sm để áp dụng inset box shadow cho một phần tử:

<div class="inset-shadow-2xs ..."></div><div class="inset-shadow-xs ..."></div><div class="inset-shadow-sm ..."></div>

Bạn có thể điều chỉnh độ mờ của inset shadow bằng cách sử dụng modifier độ mờ, như inset-shadow-sm/50. Độ mờ mặc định của inset shadow khá thấp (5%), vì vậy việc tăng độ mờ (lên khoảng 50%) sẽ làm cho inset shadow rõ nét hơn.

Thiết lập màu inset shadow

Sử dụng các utility như inset-shadow-indigo-500 và inset-shadow-cyan-500/50 để thay đổi màu của inset box shadow:

<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div><div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

Theo mặc định, các shadow có 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 modifier độ mờ.

Thêm ring

Sử dụng các utility ring hoặc ring-<number> như ring-2 và ring-4 để áp dụng box-shadow dạng solid cho một phần tử:

<button class="ring ...">Subscribe</button><button class="ring-2 ...">Subscribe</button><button class="ring-4 ...">Subscribe</button>

Theo mặc định, các ring khớp với currentColor của phần tử mà chúng được áp dụng.

Thiết lập màu ring

Sử dụng các utility như ring-indigo-500 và ring-cyan-500/50 để thay đổi màu của ring:

<button class="ring-2 ring-blue-500 ...">Subscribe</button><button class="ring-2 ring-blue-500/50 ...">Subscribe</button>

Theo mặc định, các ring 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 modifier độ mờ.

Thêm inset ring

Sử dụng các utility inset-ring hoặc inset-ring-<number> như inset-ring-2 và inset-ring-4 để áp dụng inset box-shadow dạng solid cho một phần tử:

<button class="inset-ring ...">Subscribe</button><button class="inset-ring-2 ...">Subscribe</button><button class="inset-ring-4 ...">Subscribe</button>

Theo mặc định, các inset ring khớp với currentColor của phần tử mà chúng được áp dụng.

Thiết lập màu inset ring

Sử dụng các utility như inset-ring-indigo-500 và inset-ring-cyan-500/50 để thay đổi màu của inset ring:

<button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button><button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>

Theo mặc định, các inset ring 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 modifier độ mờ.

Xóa box shadow

Sử dụng các utility shadow-none, inset-shadow-none, ring-0, và inset-ring-0 để xóa box shadow hiện có khỏi một phần tử:

<div class="shadow-none ..."></div>

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

Use utilities like shadow-[<value>],inset-shadow-[<value>],ring-[<value>], and inset-ring-[<value>] to set the box shadow based on a completely custom value:

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

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

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

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

Thiết kế phản hồi

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

<div class="shadow-none md:shadow-lg ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

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

Tùy chỉnh shadow

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

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

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

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

Learn more about customizing your theme in the theme documentation.

Tùy chỉnh inset shadow

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

@theme {  --inset-shadow-md: inset 0 2px 3px rgba(0, 0, 0, 0.25); }

Now the inset-shadow-md utility can be used in your markup:

<div class="inset-shadow-md">  <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

Tùy chỉnh màu shadow

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

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

Now utilities like shadow-regal-blue,inset-shadow-regal-blue,ring-regal-blue, and inset-ring-regal-blue can be used in your markup:

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