CSS 函数
共 1647字,需浏览 4分钟
·
2021-03-21 21:37
之前一直以为 css 没有几个函数,今天才发现 css 现在竟然已经越来越多了,一起来看看下面这些函数,你都认识多少?
属性函数
attr()
背景图片函数
linear-gradient()
radial-gradient()
conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
repeating-conic-gradient()
image-set()
image()、url()、element()
颜色函数
rgb()、rgba()、hsl()、
hsla()、hwb()、color-mod();
图形函数
circle()、ellipse()、
inset()、polygon()、path()
滤镜函数
blur()、brightness()、contrast()、
drop-shadow()、grayscale()、
hue-rotate()、invert()、
opacity()、saturate()、sepia();
转换函数
matrix()、matrix3d()、perspective()、
rotate()、rotate3d()、rotateX()、
rotateY()、rotateZ()、scale()、
scale3d()、scaleX()、scaleY()、
scaleZ()、skew()、skewX()、
skewY()、translate()、translateX()、
translateY()、translateZ()、translate3d();
数学函数
calc()、min()、
max()、mixmax()、repeat();
缓动函数
cubic-bezier()、steps();
其他函数
counter()、counters()、
toggle()、var()、 symbols()
比较常用的函数有下面这些
calc():允许您执行计算以确定CSS属性值
width: calc(100% - 100px);
cubic-bezier():定义Cubic Bezier曲线
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
var():插入自定义属性的值
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
attr():函数返回所选元素的属性值
a:after {
content: " (" attr(href) ")";
}
在css中,filter 就是专门用来做各种滤镜的
img {
filter: grayscale(100%);
}
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
linear-gradient(线性渐变) 和 radial-gradient(径向渐变)
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow);
}
env 函数用于设定安全区域与边界的距离
padding-bottom: env(safe-area-inset-bottom);