CSS3 Box阴影大小 - 单位百分比？

Question

我正在开发一个需要使用CSS3 box-shadow属性的项目.这没关系,但我发现阴影的扩散大小不能设置为父对象的百分比.

我完全理解box-shadow不是附加的,因此它不会将parent的大小作为参考.

但考虑到我需要具有完全响应的站点,其中对象流畅地缩放(不仅在断点处),这会产生问题 - 我只能以绝对单位(em或px)设置阴影扩展属性.

这有什么解决方案吗？我想过在容器内使用内部容器(用于内容)(对于"阴影" - 它没有模糊),但这会产生另一个问题 - 内部容器的垂直居中.

有解决方案吗 请不要jQuery,只是纯CSS.

谢谢

Answer 1

我发现阴影的扩散大小不能设置为父对象的百分比

真正.但是您可以设置font-size父对象,然后在ems中定义对象大小,并使用相同的ems来定义box-shadow大小.

或者,如果您的父对象恰好是窗口,则可以使用视口单元:vw和vh.

Answer 2

如果您在插图 后面,box-shadow可以使用径向渐变背景来模拟行为.而不是 -

box-shadow: inset 0 0 100% #000;

你会用 -

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);

支持:FF16 +,IE10 +,Safari 5.1+

我在Chrome开始支持该属性时找不到任何确定的答案,但我当前的版本(39.0.2171.65)肯定支持它.

如果您决定沿着这条路线前进,ColorZilla是一个非常有用的工具,用于生成径向(以及其他)渐变以及必要的前缀.

Answer 3

您是否尝试过使用该rem单元（root em 单元）？我相信您可以使用它来使其流畅地扩展。

rem 单位始终相对于根 html 元素，因此它将相应地缩放，并且您不必担心内部容器或类似的东西。目前它还拥有相当广泛的浏览器支持。

我在我的项目中使用它来提高响应速度，但始终遵循 px 或 em 已定义的参数，以便它优雅地失败，以防万一。例如：

font-size: 14px; font-size: 1.4rem;

这是一篇很棒的文章，解释了您需要了解的有关此单元的所有信息：http://snook.ca/archives/html_and_css/font-size-with-rem