前言

刷B站视频的时候突然看到一个视频说卡片加上顶部白色阴影会更有质感，就突然想到了可以根据白色阴影来做一个伪ios26液态风格风格的卡片，根据想法测试了下还行(虽然和26原版比起来差很多)，方法非常简单，效果也非常简单，那就简单分享一下。

效果预览

简单分享

先根据Tailwindcss文档引入tailwindcss，然后随便放个卡片，在卡片的class里写入以下东西即可：

rounded-4xl
shadow-[inset_1px_1px_0_0_rgba(255,255,255,0.8),inset_-1px_-1px_0_0_rgba(255,255,255,0.8)]
ease-[cubic-bezier(0.175,0.885,0.32,1.5)]
backdrop-blur-sm
bg-white/30
duration-400

其中前四个就是实现的所有东西了，分别是大圆角，左上角和右下角白色高光描边，动画曲线和一点点背景模糊。
后两个是背景色和动画时长，如果不添加动画时长的话动画就只会出现始末态，背景的话第一层元素背景可以透一点，但更高层的元素背景最好就不要太透并加上模糊，不然可读性真的很差。
想要卡片出现的动画的话可以通过添加 scale-0 origin-top-right 等后再写相关逻辑来给卡片添加从右上角弹出的Q弹动画。

示例

在一个测试项目中我试了下这个样式，HTML和CSS分别为：

<div class="glass-card h-96">
    <div class="p-6 w-full h-full flex flex-col justify-between">
        <!-- 标题 -->
        <h1 class="text-2xl font-bold text-white text-center">
            一个卡片
        </h1>
    </div>
</div>

.glass-card {
  @apply
    rounded-4xl /* 圆角 */
    relative
    shadow-[inset_1px_1px_0_0_rgba(255,255,255,0.8),inset_-1px_-1px_0_0_rgba(255,255,255,0.8)] /* 白色高光 */
    flex /* 布局相关 */
    items-center /* 中心居中 */
    bg-white/30 /* 浅色背景 */
    overflow-hidden /* 超出这个卡片的里面的东西截断 */
    transition-all /* 有动画 */
    duration-400 /* 动画时长 */
    ease-[cubic-bezier(0.175,0.885,0.32,1.5)] /* 动画曲线 */
    hover:scale-105 /* hover时变大 */
    w-10/12
    md:w-8/12 /* 宽度（写两个是因为宽度切换的动画很好看） */
    max-w-lg /* 最大宽度（防止太难看） */
    min-h-96 /* 最小高度 */
    mt-10 /* 外面的上边距 */
    backdrop-blur-sm /* 背景小小的模糊 */
}

这样就诞生了一个鼠标悬停时会Q弹变大的卡片，你也去试试吧！

后言

如果需要更相似和优质的效果的话移步其他位置吧。
可能有误，欢迎指正。