Question

是否可以在我的CSS文件的calc（）函数中执行平方根函数？我已经读过calc（）只支持+ - *和/.

等基本运算符

理想情况下，它看起来像这样：

width: calc(50% - (sqrt(7200))px);

如果calc（）没有sqrt函数，我该怎么办？

Answer 1

您可以使用CSS的预处理系统。例如，您可以使用Compass和Sass。指南针具有sqrt功能。

为什么呢？也许是为了打印造型，或者也许是为了试验中庸之道。

Answer 2

根据此处的规范http://www.w3.org/TR/css3-values/#calc

calc（）函数允许使用加法（'+'），减法（' - '），乘法（'*'）和除法（'/'）的数学表达式作为组件值。 'calc（）'表达式使用标准运算符优先级规则表示它包含的数学计算的结果。只要允许<length>，<frequency>，<angle>，<time>，<number>或<integer>值，就可以使用它。 'calc（）'表达式的组件可以是文字值，'attr（）'或'calc（）'表达式，也可以是解析为前述类型之一的值。

所以你现在不能直接在css中计算平方根..不幸的是:(

Answer 3

正如其他人所说，如果处理重复值，只需使用预处理器，或直接从计算器复制/粘贴，例如sqrt（2）= 1.4142135623730950488016887242097。

但如果你真的必须使用动态方式来动态地计算CSS中的平方根而没有JS，那当然有。虽然对于大多数情况来说精度为5似乎已经足够了，对于你的例子中的数字7200，我们应该将其提高到9+的精度，除非你能做出初步猜测，这更接近于结果，但这是不可能的现在。

但如果没有进行优化，如果使用其他答案/建议的生成输出，这将使您的文档膨胀50.000+额外字符。

由于我们动态使用它，我们应该使用CSS变量，这会略微限制浏览器的兼容性，但到目前为止（2010年3月）已经有大约88％的全球支持。

我们走了：

＆＃13;

#test {
    --number: 7200;
    --guess01: calc((var(--number) + ( var(--number) / var(--number))) / 2);
    --guess02: calc((var(--guess01) + ( var(--number) / var(--guess01))) / 2);
    --guess03: calc((var(--guess02) + ( var(--number) / var(--guess02))) / 2);
    --guess04: calc((var(--guess03) + ( var(--number) / var(--guess03))) / 2);
    --guess05: calc((var(--guess04) + ( var(--number) / var(--guess04))) / 2);
    --guess06: calc((var(--guess05) + ( var(--number) / var(--guess05))) / 2);
    --guess07: calc((var(--guess06) + ( var(--number) / var(--guess06))) / 2);
    --guess08: calc((var(--guess07) + ( var(--number) / var(--guess07))) / 2);
    --guess09: calc((var(--guess08) + ( var(--number) / var(--guess08))) / 2);
    --guess10: calc((var(--guess09) + ( var(--number) / var(--guess09))) / 2);

    width:calc(50% - (var(--guess10) * 1px));
    height:200px;
    background: black;
    padding:20px;
    color:#fff;
}

＆＃13;

<div id="test">Width is 50% - sqrt(7200) in px</div>

＆＃13;

Answer 4

我相信您有兴趣动态计算数字的平方根。与流行的看法相反，您应该能够仅使用calc来近似数字的平方根。不幸的是，应该是现实世界之间的差异。实际上，或者至少是铬，css中最好的东西，钙，因为无法用2个变量被乘数进行乘法或除法而受到极大的限制。在完美的世界中，以下是可行的。点击运行代码段。

var nth=document.getElementById('nth'),
    percision=document.getElementById('percision'),
    counter=document.getElementById('counter'),
    input=document.getElementById('input'),
    output=document.getElementById('output');

percision.oninput = function(){
    counter.innerText = percision.value;
};
//var base = "(X+A/X)/2";
var base = 'calc(calc(X + calc(A / X)) / 2)';
(nth.onchange = percision.onchange =
input.onchange = function(){
    nth.value = parseInt(nth.value);
    counter.innerText = percision.value;
    var cur=base, i=percision.value;
    while (i--){
        cur = cur.replace(/X/g, base);
    }
    cur = cur.replace(/A/g, input.value)
             .replace(/X/g, '1');
    output.value = cur;
})();

body, body *:not(script) {
  white-space: nowrap;
  margin-top: 4px;
  margin-top: 4px;
  font-family: monospace;
}
h1 {
  text-align: center;
  margin-bottom: 10px;
}
#nth {
  width: 64px;
  text-align: center;
}
nthText {
  visibility: hidden; /* not yet implemented */
  display: none;
}
#percision {
 width: 192px;
}
#input {
 width: calc(100% - 154px);
}
textarea {
 max-height: 64px;
 min-width: calc(100% - 10px);
 width: calc(100% - 10px);
 max-width: calc(100% - 10px);
 white-space: initial !important;
}

<h1 style="text-align:center">CSS sqrt function generator</h1>
<nthText>Nth root: <input id="nth" type="text" placeholder="2" value="2" /><br /></nthText>
Percision: <sub>(min)</sub> <input id="percision" type="range" min="1" max="20" value="5" /> <sub>(max)</sub> (<span id="counter">5</span> repetitions)<br />
CSS to be rooted: <input id="input" type="text" placeholder="calc(calc(5vw * 5vh) - 3em)" value="calc(calc(5vw * 5vh) - 3em)" /><br />
<textarea id="output" resize="x" rows="4" onclick="this.select()"></textarea><br />
(click on the textarea above and press <b>Ctrl</b><small>+</small><b>C</b> to copy)

浏览器支持此方法：IE9 +（因为所需的只是calc函数）

用CSS计算平方根

4 个答案: