计算（） 100% + #px

Posted 2023-03-06

【中文标题】计算（） 100% + #px

【英文标题】：calc() 100% + #px

【发布时间】：2012-08-10 15:20:50

【问题描述】：

我正在努力实现一些我什至不太确定在这里是否可行。

我正在尝试在我的网站的导航下放置一个特定的投影 PNG 图像。但是，我也想将此功能用于我希望在网站上的任何对象，无论是图像、div 还是按钮。基本上对任何物体都使用相同的阴影图像。

使用 css3 calc() 函数我正在尝试做对象的高度 @ 100% + 25px（png 的高度）。

我尝试过造型：

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 

但是从我可以在 Firebug 中收集到的 100% + 25px 是新的 100%，因为这没有任何效果。

我也试过了：

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 
background-position: 0 -moz-calc(100% + 25px);

但这里也没有欢乐。

如果我使用 calc(3em + 25px);它工作没有问题，但这不够灵活，无法处理任何对象。

这甚至可能吗？我说得有道理吗？！

【问题讨论】：

'-moz-box-shadow: 0 0 30px 5px #999; -webkit-box-shadow: 0 0 30px 5px #999;'这样做不会更好吗？

非常感谢，但这是我用于弯曲阴影的特定图像。我已经将 box-shadow 作为 CSS 属性完成了，但这并不是我想要的效果。

如果我理解正确，请使用 'border-top-left-radius: 20px 20px;边框右上角半径：20px 20px;'创建弯曲的角落。影子会随之而来。

【参考方案1】：

我不是 100% 确定，但 working draft 描述了计算两侧的运算符形成一个子表达式（单一类型）。

由于您将相对值 (%) 与绝对值 (px) 相结合，因此可能无法完成计算。

更新：我做了一个小测试，它似乎工作得很好。你确定你在 html 中的选择器和位置是正确的吗？检查这个Fiddle。

【讨论】：

完美！非常感谢达米安！通过将阴影 div 放在 Nav 元素中并给 Nav 元素一个固定的高度，阴影完美地显示在底部。需要解决一些微不足道的边缘冲突，但这确实非常有效！非常感谢！

只是为了指出。考虑到您首先使用 100px 高度这一事实，% 对 px 的测试是有缺陷的，因为 100% + 25% 与 100% + 25px 相同。正确的测试将使用 100 像素以外的初始高度。也就是说，将小提琴中的高度更改为 300px 确实表明测试确实按预期工作。

同上，这里发生的问题是它自动选择了第一个参数的度量，所以在这种情况下它正在运行（100% + 25px = 125px），恰好是结果与 100% + 25px 相同。这只是一个巧合，他们得出了相同的结果，在不同的高度上它是行不通的