Css Tailwind Boxshadow

发布于08月08日

I want a box shadow effect to look like this picture >>

Currently mine looks like this, How do i made the color darker and have it on all sides.

 <div className="card shadow-xl shadow-gray-900">

这是我当前的代码

推荐答案

用tailwind的 Select 是不可能在div的中心做shadow分的，所以你必须自己做custom shadow分，而tailwind可能是这样的:

<div class="bg-white drop-shadow-[0_0px_10px_rgba(0,0,0,0.25)] rounded-md">
        <p>Hello</p>
</div>

或者，您可以转到tailwind.config.js并添加一些自定义的css，例如:

module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        '4xl': [
            '0 35px 35px rgba(0, 0, 0, 0.25)',
            '0 45px 65px rgba(0, 0, 0, 0.15)'
        ]
      }
    }
  }
}

或者，另一种 Select 是只制作另一个css文件(如果您已经这样做了，则不需要制作另一个css文件).然后添加以下内容:

.customShadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

然后，对于html文件:

<div class="bg-white customShadow rounded-md">
        <p>Hello</p>
</div>

Css相关问答推荐

如何允许在bslb中 Select 输入重叠卡片？

如何在移动屏幕尺寸上包装元素？

搜索栏突出显示角形HTML中的Mat-Form-field输入框的焦点

防止在添加更多项目时扩展CSS网格行

如果一个类紧挨着另一个具有特定类的元素，请使用特殊的CSS，只使用不带JS的CSS

如何缩小 Select 元素的背景图像？

Next.js 条件样式

Vue3 组合 api 中的对象值样式

CSS 布局：使一列依赖于另一列

如何使用props 为 Vue 中的组件创建动态背景图像？

如何使 css 不重复同一个类？

使用任意运行时字符串进行 Tailwind CSS 类定位

我怎样才能将我的按钮向上移动，因为文本是

为什么 flexbox 中的在应用居中时不会调整大小？

纯 CSS/JS 的 SVG 连续向内方形螺旋动画

如何使半圆的边框淡出？

HTML/CSS 中的单选/复选框对齐

Sass 无效的 CSS 错误：预期的表达式

Select 器.class.class和.class.class有什么区别？

对象拟合不影响图像

实用课程推荐