CSS SNIPPET

  返回

使用Calc()函数  其他

calc()函数允许使用数学表达式定义CSS值,数学表达式的结果将作为属性的值。

HTML
<div class="box-example"></div>
CSS
.box-example {
  height: 280px;
  background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
  background-position: calc(100% - 20px) calc(100% - 20px);
}
效果演示
代码说明
  1. 支持加、减、乘、除
  2. 可以表达式中为不同的值使用不同的单位(例如同时使用像素和百分比)
  3. 允许嵌套使用calc() 函数。
  4. 可用于任何支持 <length>, <frequency>, <angle>, <time>, <number>, <color>, 或 <integer> 的属性,像宽度、高度、字体大小等等。
浏览器支持

100.0%