阴影

我们提供了一个基本的类名 has-shadow，可用于定义元素上的阴影。

演示

代码

HTML

代码

JSX/TSX

<div class="rounded-xl w-20 h-20 has-shadow" />

<div className='rounded-xl w-20 h-20 has-shadow' />

并且还提供了一系列阴影类来调整阴影的外观。

您也可以自行决定将这些类合并。

wider widest compact 控制阴影的半径
bolder boldest 控制阴影的颜色饱和度
rainbow 生成彩虹阴影

演示

代码

HTML

代码

JSX/TSX

default

wider

widest

compact

compact bolder

compact boldest

bolder

boldest

boldest widest

rainbow

<div
	class="grid grid-cols-3 h-[50vh] gap-20 py-10 px-10 place-items-stretch place-content-stretch"
>
	<div class="rounded-xl has-shadow">default</div>
	<div class="rounded-xl has-shadow wider">wider</div>
	<div class="rounded-xl has-shadow widest">widest</div>
	<div class="rounded-xl has-shadow compact">compact</div>
	<div class="rounded-xl has-shadow compact bolder">compact bolder</div>
	<div class="rounded-xl has-shadow compact boldest">compact boldest</div>
	<div class="rounded-xl has-shadow bolder">bolder</div>
	<div class="rounded-xl has-shadow boldest">boldest</div>
	<div class="rounded-xl has-shadow boldest widest">boldest widest</div>
	<div class="rounded-xl has-shadow rainbow">rainbow</div>
</div>

<div className='grid grid-cols-3 h-[50vh] gap-20 py-10 px-10 place-items-stretch place-content-stretch'>
  <div className='rounded-xl has-shadow'>
    default
  </div>
  <div className='rounded-xl has-shadow wider'>
    wider
  </div>
  <div className='rounded-xl has-shadow widest'>
    widest
  </div>
  <div className='rounded-xl has-shadow compact'>
    compact
  </div>
  <div className='rounded-xl has-shadow compact bolder'>
    compact bolder
  </div>
  <div className='rounded-xl has-shadow compact boldest'>
    compact boldest
  </div>
  <div className='rounded-xl has-shadow bolder'>
    bolder
  </div>
  <div className='rounded-xl has-shadow boldest'>
    boldest
  </div>
  <div className='rounded-xl has-shadow boldest widest'>
    boldest widest
  </div>
  <div className='rounded-xl has-shadow rainbow'>
    rainbow
  </div>
</div>

概览框线