CSS CSS3 框阴影大小 – 百分比单位？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14061104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Box shadow size – percent units?
提问by Jozko Remen
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.
我正在开发一个需要使用 CSS3 box-shadow 属性的项目。没关系，但我发现阴影的传播大小不能设置为父对象的百分比。
I fully understand that box-shadow is not additive, thus it doesn't take the size of a parent as a reference.
我完全理解 box-shadow 不是可加的，因此它不以父级的大小作为参考。
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).
但考虑到我需要一个完全响应的站点，对象可以流畅地缩放（不仅在断点上），但这也带来了一个问题——我可以设置阴影以仅以绝对单位（em 或 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.
有什么解决办法吗？我想过在容器内使用内部容器（用于内容）（用于“阴影” - 它没有模糊），但这会产生另一个问题 - 内部容器的垂直居中。
Any solution? No jQuery please, just pure CSS.
有什么解决办法吗？请不要使用 jQuery，请使用纯 CSS。
回答by mik01aj
I have found out that spread size of shadow can't be set to percentage of parent object
我发现阴影的传播大小不能设置为父对象的百分比
True. But you can set font-sizeon the parent object, then define the object size in ems, and use the same ems to define the box-shadowsize.
真的。但是你可以font-size在父对象上设置，然后在ems中定义对象大小，并使用相同的ems来定义box-shadow大小。
Or, if your parent object happens to be the window, you can use viewport units: vwand vh.
或者，如果您的父对象恰好是窗口，您可以使用视口单位：vw和vh。
回答by shakyjake
If you're after an insetbox-shadowyou could use a radial-gradient background to mimic the behaviour. So instead of -
如果您在插入后，box-shadow您可以使用径向渐变背景来模仿行为。所以，而不是 -
box-shadow: inset 0 0 100% #000;
You would use -
你会使用 -
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);
Support: FF16+, IE10+, Safari 5.1+
支持：FF16+、IE10+、Safari 5.1+
I can't find any definitive answer on when Chrome started supporting the property, but my current version (39.0.2171.65) definitely supports it.
我找不到关于 Chrome 何时开始支持该属性的任何明确答案，但我当前的版本 (39.0.2171.65) 绝对支持它。
ColorZillais a pretty useful tool for generating radial (among other) gradients along with the necessary prefixes if you decide to go down this route.
如果您决定沿着这条路线走，ColorZilla是一个非常有用的工具，用于生成径向（以及其他）渐变以及必要的前缀。
回答by alex
Have you tried using the remunit (root em unit)? I believe you can use this to make it scale fluidly.
您是否尝试过使用rem单位（root em 单位）？我相信您可以使用它来使其流畅地扩展。
The rem unit is always relative to the root html element, so it will scale accordingly and you don't have to worry about inner containers or anything like that. It also has pretty broad browser support at this point.
rem 单位总是相对于根 html 元素，所以它会相应地缩放，你不必担心内部容器或类似的东西。在这一点上，它还具有相当广泛的浏览器支持。
I use it on my projects to make them more responsive, but always follow a parameter already defined by px or em so that it fails gracefully just in case. For example:
我在我的项目中使用它来使它们更具响应性，但始终遵循 px 或 em 已经定义的参数，以便它优雅地失败以防万一。例如：
font-size: 14px; font-size: 1.4rem;
Here's a great article explaining everything you need to know about this unit: http://snook.ca/archives/html_and_css/font-size-with-rem
这是一篇很棒的文章，解释了您需要了解的有关此单元的所有信息：http: //snook.ca/archives/html_and_css/font-size-with-rem
回答by Cornelius
Do you want the box-shadow to scale with the width of the container or with the height of the container? You can't really specify a height and width of your shadow, only a spread. So if your container shrinks by 10% in width but does not shrink in height then your shadow will shrink by 10% (if it were possible), i.e. your shadow's height would scale even though it probably shouldn't.
你想让 box-shadow 随容器的宽度或容器的高度一起缩放吗？您无法真正指定阴影的高度和宽度，只能指定展开。因此，如果您的容器宽度缩小 10% 但高度没有缩小，那么您的阴影将缩小 10%（如果可能），即您的阴影的高度会缩放，即使它可能不应该缩放。
If you want the box-shadow to actually scale correctly with regards to height and width, you would have to create multiple shadows - one for height, one for width.
如果您希望 box-shadow 在高度和宽度方面实际正确缩放，则必须创建多个阴影 - 一个用于高度，一个用于宽度。
However, you will never be able to scale the actual shadow, only the container of the shadow. So you would create a container inside your main container and then give it negative margins and attach the box-shadow. However, you will soon notice that your shadow actually grows instead of shrinking when you scale the container down.
但是，您永远无法缩放实际阴影，只能缩放阴影的容器。因此，您将在主容器内创建一个容器，然后为其设置负边距并附加 box-shadow。但是，您很快就会注意到，当您缩小容器时，您的阴影实际上是在增长而不是缩小。
Seems a bit overkill to try and scale something which isn't scalable without using media queries or jQuery.
在不使用媒体查询或 jQuery 的情况下尝试扩展不可扩展的东西似乎有点矫枉过正。
However, if you're looking for scalable borders, i.e. box-shadow without blur :P, then look no further:
但是，如果您正在寻找可缩放的边框，即没有模糊的框阴影 :P，那就别无所求：
<style>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
margin: 100px auto 0;
width: 80%; /* .content width */
height: 400px; /* .content height */
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff; /* .content background */
}
.shadow {
position: absolute;
top: -10%; /* .content shadow top height */
right: -5%; /* .content shadow right width */
bottom: -10%; /* .content shadow bottom height */
left: -5%; /* .content shadow left width */
background: #000; /* .content shadow, unfortuntely no blur effect */
}
</style>
<div class="wrapper">
<div class="shadow"></div>
<div class="content">This is your content</div>
</div>
回答by Ian Y.
If the element has a defined width (except for a percentage width), you can create a custom property for the width and then use the custom property with the calc()function for box shadow.
如果元素具有定义的宽度（百分比宽度除外），您可以为宽度创建自定义属性，然后将自定义属性与calc()框阴影功能一起使用。
For example, the CSS code below makes the "spread radius" of box shadow 20% of the div's width:
例如，下面的 CSS 代码使框阴影的“传播半径”为div宽度的20% ：
div {
--width: 100px;
width: var(--width);
box-shadow: 0 0 0 calc(var(--width) * 0.2) #aaa;
}
