Css函数-function

大多数的value都是数字或关键字，有时也使用函数（function）,比如calc:

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>


.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}



函数是由：函数名和括起来的值 组成。

上面的例子中，的 width: calc(90% - 30px);  表示 包含box的容器（也就是outer的宽度）的宽度的90% 减去30px的值。

再看一个例子：rotate() 属于transform的值：transform属性可以rotate, scale, skew, 或者 translate 一个元素。

<div class="box"></div>


.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}



阅读量: 408
发布于:
修改于: