函数

CSS Functional Notation - CSS（层叠样式表） | MDN (mozilla.org)open in new window

# 一. 综合

# var

var(<自定义属性名>, <备用值>?)

html {
    --base-color: #666666;
}
h1 {
    color: var(--base-color, #333333);
}

# url

url(<资源链接>)

# attr

attr(<元素属性名>)

# local

local(<本地字体名>)

# format

format(<文件格式>)

• 'embedded-opentype'：eot 文件
• 'woff2'：woff2 文件
• 'woff'：woff 文件
• 'truetype'：ttf 文件
• 'svg'：svg 文件

# 二. 数学

# calc

calc(<数学表达式>)

# max

max(<数学表达式>,#)

# min

min(<数学表达式>,#)

# clamp

clamp(<最小值>, <首选值>, <最大值>)

# 三. 缓动

# cubic-bezier

CSS cubic-bezier() 函数 | 菜鸟教程 (runoob.com)open in new window

cubic-bezier(<x1>, <y1>, <x2>, <y2>)

x1, x2

• 数值：0~1

y1, y2

• 数值

# steps

steps(<步数>, <跳跃时机>?)

步数

• 数值

跳跃时机

• start：每一个步长开始时跳跃
• end：每一个步长结束时跳跃 默认值

# 四. 网格

# repeat

repeat(<重复次数>, <长度>#)

重复次数

• auto-fill：自动填充
• auto-fit：自动填充并适配长度
• 数值

# minmax

minmax(<最小值>, <最大值>)

# fit-content

fit-content(<最大值>)

# 五. 颜色

# rgb

rgb(<红>, <绿>, <蓝>)

红，绿，蓝

• 数值：0~255
• 百分值

# rgba

rgba(<红>, <绿>, <蓝>, <透明度>)

透明度

• 数值：0~1

# hsl

hsl(<色相>, <饱和度>, <亮度>)

色相

数值：0~360，0/360 为红色，120 为绿色，240 为蓝色

饱和度

百分值： 0% 为灰色， 100% 为全色

亮度

百分值： 0% 为暗， 100% 为白

# hsla

hsla(<色相>, <饱和度>, <亮度>, <透明度>)

# 六. 渐变

# linear-gradient

linear-gradient(<渐变方向>? [, <颜色> <位置>?]#)

渐变方向

• 角度值
• to top：= 0deg
• to top right：= 45deg
• to right：= 90deg
• to bottom right：= 135deg
• to bottom：= 180deg 默认值
• to bottom left：= 225deg
• to left：= 270deg
• to top left：= 315deg

颜色

• 颜色值

位置

• 长度值
• 百分值

# repeating-linear-gradient

repeating-linear-gradient(<渐变方向>? [, <颜色> <位置>?]#)

# radial-gradient

radial-gradient(<类型>? <半径>? [at <圆心横坐标> <圆心纵坐标>]? [, <颜色> <位置>?]#)

类型

• ellipse：椭圆 默认值
• circle：圆

半径

• farthest-corner：圆心到最远的角 默认值
• closest-corne：圆心到最近的角
• farthest-side：圆心到最远的边
• closest-side：圆心到最近的边

圆心横坐标

• center：中间 默认值
• left：最左边
• right：最右边
• left <长度值|百分值>：左边偏移
• right <长度值|百分值>：右边偏移
• 长度值：左边偏移
• 百分值：左边偏移，相对于自身宽度

圆心纵坐标

• center：中间 默认值
• top：最上边
• bottom：最下边
• top <长度值|百分值>：上边偏移
• bottom <长度值|百分值>：下边偏移
• 长度值：上边偏移
• 百分值：上边偏移，相对于自身高度

颜色

• 颜色值

位置

• 长度值
• 百分值

# repeating-radial-gradient

repeating-radial-gradient(<类型>? <半径>? [at <圆心横坐标> <圆心纵坐标>]? [, <颜色> <位置>?]#)

# conic-gradient

conic-gradient(<起始角度>? [at <圆心横坐标> <圆心纵坐标>]? [, <颜色> <角度>?#]#)

起始角度

• 角度值：0deg 默认值 = 12点钟方向

角度

• 角度值

# repeating-conic-gradient

repeating-conic-gradient(<起始角度>? [at <圆心横坐标> <圆心纵坐标>]? [, <颜色> <角度>?#]#)

# 七. 形状

# inset

inset(<裁剪边距>{4} [round <圆角水平垂直半径>{4} | [<圆角水平半径>{4} / <圆角垂直半径>{4}]]?)

裁剪边距

• 长度值
• 百分值：左右裁剪边距相对于宽，上下裁剪边距相对于高

圆角半径

• 长度值
• 百分值：水平半径相对于宽，垂直半径相对于高

# circle

circle(<圆半径>? [at <圆心横坐标> <圆心纵坐标>]?)

圆半径

• closest-side：圆心到最近的边 默认值
• farthest-side：圆心到最远的边
• 长度值
• 百分值：相对于 sqrt((width^2+height^2) / 2)

圆心横坐标

• center：中间 默认值
• left：最左边
• right：最右边
• left <长度值|百分值>：左边偏移
• right <长度值|百分值>：右边偏移
• 长度值：左边偏移
• 百分值：左边偏移，相对于自身宽度

圆心纵坐标

• center：中间 默认值
• top：最上边
• bottom：最下边
• top <长度值|百分值>：上边偏移
• bottom <长度值|百分值>：下边偏移
• 长度值：上边偏移
• 百分值：上边偏移，相对于自身高度

# ellipse

ellipse(<x轴半径>? <y轴半径>? [at <圆心横坐标> <圆心纵坐标>]?)

x轴半径

• closest-side：圆心到左右最近的边 默认值
• farthest-side：圆心到左右最远的边
• 长度值
• 百分值：相对于自身宽度，50%

y轴半径

• closest-side：圆心到上下最近的边 默认值
• farthest-side：圆心到上下最远的边
• 长度值
• 百分值：相对于自身高度，50%

圆心横坐标

• center：中间 默认值
• left：最左边
• right：最右边
• left <长度值|百分值>：左边偏移
• right <长度值|百分值>：右边偏移
• 长度值：左边偏移
• 百分值：上边偏移，相对于自身宽度

圆心纵坐标

• center：中间 默认值
• top：最上边
• bottom：最下边
• top <长度值|百分值>：上边偏移
• bottom <长度值|百分值>：下边偏移
• 长度值：上边偏移
• 百分值：上边偏移，相对于自身高度

# polygon

polygon(<填充规则>? [, <顶点横坐标> <顶点纵坐标>]#)

填充规则

• nonzero：非零规则 默认值
• evenodd：奇偶规则

css 填充规则：nonzero 和 evenoddopen in new window

顶点横坐标

• 长度值
• 百分值：相对于自身宽度

顶点纵坐标

• 长度值
• 百分值：相对于自身高度

# path

path(<svg路径>)

path 元素

# 八. 变换

# translateX

translateX(<x轴平移距离>)

• 长度值
• 百分值：相对于自身宽度

# translateY

translateY(<y轴平移距离>)

• 长度值
• 百分值：相对于自身高度

# translateZ

translateZ(<z轴平移距离>)

• 长度值

# translate

translate(<x轴平移距离>[, <y轴平移距离>])

# translate3d

translate3d(<x轴平移距离>, <y轴平移距离>, <z轴平移距离>)

# scaleX

scaleX(<x轴缩放比例>)

• 数值

# scaleY

scaleY(<y轴缩放比例>)

• 数值

# scaleZ

scaleZ(<z轴缩放比例>)

• 数值

# scale

scale([<x轴缩放比例>, <y轴缩放比例>] || <xy轴缩放比例>)

# scale3d

scale3d(<x轴缩放比例>, <y轴缩放比例>, <z轴缩放比例>)

# rotateX

rotateX(<沿x轴旋转角度>)

• 角度值

# rotateY

rotateY(<沿y轴旋转角度>)

• 角度值

# rotateZ

rotateZ(<沿z轴旋转角度>)

• 角度值

# rotate

rotate(<沿z轴旋转角度>)

• 角度值

# rotate3d

rotate3d(<x坐标>, <y坐标>, <z坐标>, <旋转角度>)

x坐标，y坐标，z坐标

• 数值

旋转角度

• 角度值

# skewX

skewX(<x轴倾斜角度>)

• 角度值

# skewY

skewX(<y轴倾斜角度>)

• 角度值

# skew

skew(<x轴倾斜角度>, <y轴倾斜角度>)

• 角度值

# matrix

matrix(<n1>, <n2>, <n3>, <n4>, <n5>, <n6>)

# matrix3d

matrix(<n1>, <n2>, <n3>, <n4>, <n5>, <n6>, <n7>, <n8>, <n9>, <n10>, <n11>, <n12>, <n13>, <n14>, <n15>, <n16>)

# perspective

perspective(<透视距离>)

长度值

# 九. 滤镜

# blur

blur(<高斯模糊距离>)

• 长度值：0px 原图

# brightness

brightness(<亮度>)

• 百分值：100% 原图

# contrast

contrast(<对比度>)

• 百分值：100% 原图

# saturate

saturate(<饱和度>)

• 百分值：100% 原图

# grayscale

grayscale(<灰色图像>)

• 百分值：0% 原图~100%

# sepia

sepia(<褐色图像>)

• 百分值：0% 原图~100%

# hue-rotate

hue-rotate(<色相旋转角度>)

• 角度值：0deg 原图

# invert

invert(<色相反转>)

• 百分值：0% 原图~100%

# drop-shadow

drop-shadow(<阴影水平偏移距离> <阴影垂直偏移距离> <阴影模糊距离> <阴影颜色>)

阴影水平偏移距离

• 长度值：正值向右偏移，负值向左偏移

阴影垂直偏移距离

• 长度值：正值向下偏移，负值向上偏移

阴影模糊距离

• 长度值

阴影颜色

• 颜色值

# opacity

opacity(<透明度>)

• 数值：0~1
• 百分值