英文:
Child div shadow not appearing
问题
为什么id="pin"的div不会显示阴影？我尝试将其包装在一个div中，并将阴影应用于父元素，但也没有起作用。如何让阴影出现？
这是我从我的Tailwind Playground 中获得的 HTML。
<div class="relative flex min-h-screen flex-col items-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div id="note" class="w-40 h-40 bg-yellow-100 shadow-2xl p-4 flex flex-col items-center">
<div id="pin" class="bg-red-500 shadow-2xl w-3 h-3 rounded-full"></div>
<div>内容..</div>
</div>
</div>
英文:
Why won't the shadow appear for the div with id="pin"? I've tried wrapping it in a div and applying the shadow to the parent but that wasn't working either. How can I get the shadow to appear?
This is the HTML I have from my Tailwind playground.
<!-- language: html -->
<div class="relative flex min-h-screen flex-col items-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div id="note" class="w-40 h-40 bg-yellow-100 shadow-2xl p-4 flex flex-col items-center">
<div id="pin" class="bg-red-500 shadow-2xl w-3 h-3 rounded-full"></div>
<div>Content..</div>
</div>
</div>
答案1
得分: 1
以下是翻译好的代码部分：
<div class=" flex min-h-screen flex-col items-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div id="note" class="w-40 h-40 bg-yellow-100 shadow-2xl p-4 flex flex-col items-center">
<div id="pin" class="bg-red-500 shadow-[0_4px_3px_1px_rgba(0,0,0,0.6)] w-3 h-3 rounded-full"></div>
<div>内容..</div>
</div>
</div>
英文:
Explicitly like @ngtrthinh is referring to would be something in this ballpark:
<div class=" flex min-h-screen flex-col items-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div id="note" class="w-40 h-40 bg-yellow-100 shadow-2xl p-4 flex flex-col items-center">
<div id="pin" class="bg-red-500 shadow-[0_4px_3px_1px_rgba(0,0,0,0.6)] w-3 h-3 rounded-full"></div>
<div>Content..</div>
</div>
</div>
You can test this here: Play Tailwind
Have a great day!
答案2
得分: 0
我尝试了你的代码，它可以正常工作。唯一的问题是，阴影太小了，难以看清。为了验证它，你可以将圆圈变大，然后在你的CSS开发工具中尝试切换阴影的开关。
只是一个小提示：阴影颜色默认使用标签文本的颜色。这可能会导致在某些背景颜色下能见度不佳。
英文:
I tried your code and it works. The only problem is, the shadow is too small to be seen. To verify it you could make the circle bigger and try toggling the shadow on and off in your css devtool.
Just a side note: shadow color is by default using the color of the tag's text. This might also cause bad visibility on some background color.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论