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);
浏览 33
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报