CSS3 Box阴影大小–百分比单位? [英] CSS3 Box shadow size – percent units?

问题描述

我正在一个需要使用CSS3 box-shadow属性的项目中.很好，但是我发现不能将阴影的散布大小设置为父对象的百分比.

I'm working on a project that needs to use CSS3 box-shadow property. That's fine, but I have found out that spread size of shadow can't be set to a percentage of parent object.

我完全理解盒影不是可加的，因此它不以父级的大小为参考.

I fully understand that box-shadow is not additive, thus it doesn't take the size of a parent as a reference.

但是考虑到我需要拥有一个完全响应的站点，并且对象可以流畅地缩放(不仅在断点上)，但这也带来了一个问题–我可以设置阴影以仅以绝对单位(em或px)散布属性

But given the fact that I need to have a fully responsive site with objects scaling fluidly (not only on breakpoints), but this also poses a problem – I can set shadow to spread property only in absolute units (em or px).

对此有什么解决办法吗?我曾考虑过在容器内使用内部容器(用于内容)(用于阴影" –不模糊)，但这又带来了另一个问题–内部容器的垂直居中.

Is there any solution to this? I thought about using inner container (for content) within container (for "shadow" – it's without blur), but this creates another problem – vertical centering of inner container.

有解决方案吗?请不要jQuery，只需纯CSS.

Any solution? No jQuery please, just pure CSS.

推荐答案

我发现无法将阴影的散布大小设置为父对象的百分比

I have found out that spread size of shadow can't be set to percentage of parent object

是的.但是您可以在父对象上设置 font-size ，然后在 em s中定义对象大小，并使用相同的 em s进行定义 box-shadow 大小.

True. But you can set font-size on the parent object, then define the object size in ems, and use the same ems to define the box-shadow size.

或者，如果您的父对象恰好是窗口，则可以使用视口单位:大众和 vh .

Or, if your parent object happens to be the window, you can use viewport units: vw and vh.

这篇关于CSS3 Box阴影大小–百分比单位?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！