主页 / coding / 问题 / 76923499
Accepted
ryansle
Asked: 2023-08-18 00:36:26 +0800 CST

带盒阴影的圆角边缘 - Tailwind CSS

  • 772

我正在尝试使用框阴影对按钮边框进行轻微调整，但不确定如何调整。

以下 Tailwind.css 自定义创建了以下按钮边框：

boxShadow: {
  'outline': '3px 3px 0px #777, -3px -3px 0px #777, -3px 3px 0px #777, 3px -3px 0px #777',
}

在此输入图像描述

正如您所看到的，它的左右边缘不太正确，有轻微的卷曲，它们没有完全对齐。有谁知道如何解决这个问题，使其在整个边框周围完美圆形？

提前致谢。

css

2 个回答

  1. Best Answer

    使用 box-shadow 属性的 spread 参数

    button
{
background:white;
padding:10px 30px;
border-radius:20px;
border:none;
box-shadow:0 0 0 4px rgba(0,0,0,1);
}
    <button>Button Test</button>

    • 2

  2. 如果您使用的是 TailwindCSS，也可以使用它。

    <button type="button" className="m-10 py-2.5 px-7 shadow-[0_0_0_4px_rgba(0,0,0,1)] rounded-full" >Button Test</button>

    结果：

    圆角按钮

    • 0

相关问题