CSS Functions && CSS Variables

CSS Variables

Syntax

{
--variable:#ffffff;
color: var(--variable);
}

CSS Functions

calc()

calc()用于对数值作计算,单位包括长宽(px、vw等)、频率(Hz等)、角度(deg、rad、turn等)、时间(s、ms)、小数和整数。

calc()要求+和-的左右有空格。

例如,width:calc(100% - 30px)定义了比父元素宽度小30px的宽度。

attr()

attr()用于取回被选择元素的属性,比如对一个<img>标签,可以用attr(src)获取图片地址。如果css选择器选择了多个元素,attr()在每个元素上可能有不同结果。

max()

取最大值。

min()

取最小值。

fit-content()

fit-content()接受一个参数,如果这个参数超过可设置的最大值,那么用最大值替代,如果小于最小值,则用最小值替代。原理其实是min(maximum size, max(minimum size, argument))。

env()

env()的作用类似于var(),但env()除了返回值,还会改变user agent-defined环境变量的值,MDN有如下例子:

body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}

第二个参数是可以省略的,这样不会更改user agent-defined环境变量的值。

user agent stylesheet即浏览器默认样式表,比如<h1></h1>会自带margin。有时这会给开发和适配带来不便,解决方案是使用reset.css。

counter()

MDN示例,看完应该明白了:

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  counter-reset: listCounter;/**重置计数器**/
}
li {
  counter-increment: listCounter;/**每多一个li元素listCounter+1**/
}
li::after {
  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]";/**通过counter获取listCounter的值**/
}

RESULT

linear-gradient()

线性渐变图像,支持设置颜色、角度、位置(百分比位置),例如:

background: linear-gradient(0.5turn, #e66465 0%, #9198e5 100%);

repeat()、minmax()

和Grid配合使用,详情参考CSS Grid

rotate()、matrix()、scale()、translate()、skew()等

旋转、矩阵表达的线性变换、缩放、移动、扭曲,详情参考CSS transform

opacity()、blur()等

透明、模糊,详情参考CSS filter

一些实验特性

element()

比如background:element(#id)可以以#id选择的元素为背景,element()使元素作为图片使用。仅Firefox支持。

发表评论

电子邮件地址不会被公开。