CSS函数使用,里面有clip-path使用画各种多边形的原理和示例哦

摘要:
W3C中有许多易于使用的css函数。使用张新旭大神的计数器()示例作为引用,返回计数器的迭代值,并将其作为值传递给contentcounters()嵌套计数器calc(),以计算:值(整数,浮点)、长度(px/em/rem/vw/vh)、角度(deg/turn)、时间(s/ms)、,和百分比(%)都可以用作参数max()最大值:max(…val)可以用于返回最大值。

css函数:指复杂类型或调用特殊处理的组件值类型,在css中,只要带有()的属性都是函数。

相信大家都多多少少都用过一些如rgb()/rgba()/url()等等,其实呢,W3C里面有很多的并且比较好用的css函数。本章博文就是整理了一些常用的使用的函数,方便记忆及以后的开发使用。

颜色函数:(HEX为16进制展示颜色如#eee)

  rgb()、rgba()、hsl():以色相、饱和度、明度在指定颜色、hsla()、color():色彩模式,基于当前颜色衍生出其他颜色

数学函数

  • clamp(min, val, max):区间范围值,可用于响应式布局。使用参考张鑫旭大神的例子
  • counter()计数器 用于返回计数器迭代值,必须结合伪元素content,以计数器名称作为参数,并作为值传递给content
  • counters()嵌套计数器
  • calc()计算:用于动态计算单位,数值(整数、浮点数)、长度(px/em/rem/vw/vh)、角度(deg/turn)、时间(s/ms)和百分比(%)都能作为参数
  • max()最大值 :max(...val)用于返回最大值,{100%; min- 1200px;} 等价于 { width:max(1200px,100%) },其实是限制最小值
  • min()最小值  :min(...val)用于返回最小值,{100%; max- 1200px;} 等价于 { width:min(1200px,100%) },其实是限制最大值

calc()使用注意事项:四则运算只能使用+、-、*、/ 作为运算符号,遵循加减乘除运算规则,每个符号必须使用空格间隔,可混合不同计量单位动态计算,例子:

页面自适应:font-size:calc(100vw / 7.5)

在单页面开发中有滚动和没滚动导致抖动解决:padding-right: calc(100vw - 100%),100vw是视窗宽度,100%为内容宽度,那么100vw - 100% 就是滚动条宽度,声明padding-right保留滚动条的位置,这样就不会出现抖动了。

嵌套使用,calc(min(1200px, 100%) / 5);

 

背景函数

  • url()
  • image-set():图像集合,根据屏幕分辨率匹配合适图像,例background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );
  • linear-gradient():线性渐变 例:background-image:linear-gradient(toright, red , yellow);
  • radial-gradient():径向渐变
  • conic-gradient():锥形渐变

滤镜函数

  • blur():模糊
  • brightness():亮度
  • contrast():对比度
  • drop-shadow():阴影
  • grayscale():灰度
  • hue-rotate():色相旋转
  • invert():反相
  • opacity():透明度
  • saturate():饱和度
  • sepia():褐色

图像函数clip-path的属性值

  • circle(半径 at x坐标 y坐标):圆形  {clip-path: circle(50% at 50% 50%);}
  • ellipse(X半径 Y半径 at x坐标 y坐标):椭圆形 {clip-path: ellipse(40% 50% at 50% 50%);}
  • inset():矩形
  • path():路径
  • polygon():多边行  例子三角形{clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}

circle()使用:值为一个坐标点和半径做成;左上角为原点,右下角为(100%,100%)的点;半径用at关键字来定义。以下图示X轴和Y轴正方向为可视区域。

CSS函数使用,里面有clip-path使用画各种多边形的原理和示例哦第1张

 

 

 ellipse()使用:值为X轴半径、Y轴半径、定位椭圆的坐标;左上角为原点,右下角为(100%,100%)的点,at关键字将半径和坐标分开。例子{clip-path: ellipse(30%20%at 50%50%)}

 

CSS函数使用,里面有clip-path使用画各种多边形的原理和示例哦第2张

 

 inset()使用:值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius);round前面的数值,表示的是距离,如果第一个值为25%,则表示图像在上面从25%开始绘制。

 CSS函数使用,里面有clip-path使用画各种多边形的原理和示例哦第3张

polygon()使用:值为多个坐标点组成,坐标第一个是值是X方向,第二个值是Y方向;左上角是原点,右下角是(100%,100%)的点。

{clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}

CSS函数使用,里面有clip-path使用画各种多边形的原理和示例哦第4张

 

变换函数

  • matrix():矩阵
  • matrix3d():3D矩阵
  • perspective():视距
  • rotate():旋转
  • rotate3d():3D旋转
  • rotateX():X轴旋转
  • rotateY():Y轴旋转
  • rotateZ():Z轴旋转
  • scale():缩放
  • scale3d():3D缩放
  • scaleX():X轴缩放
  • scaleY():Y轴缩放
  • scaleZ():Z轴缩放
  • skew():扭曲
  • skewX():X轴扭曲
  • skewY():Y轴扭曲
  • translate():位移
  • translate3d():3D位移
  • translateX():X轴位移
  • translateY():Y轴位移
  • translateZ():Z轴位移

缓动函数

  • cubic-bezier():贝塞尔曲线
  • steps():逐帧

 属性函数:attr(val)用于返回节点属性,通常与伪元素content使用,例如

<h1 class="hello" data-name="玩转CSS的艺术之美"></h1>
h1 {
    &::before {
        content: attr(class);
    }
    &::after {
        content: attr(data-name);
    }
}

 

免责声明:文章转载自《CSS函数使用,里面有clip-path使用画各种多边形的原理和示例哦》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇EasyUI笔记Qt之表单布局(QFormLayout)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Django 语法笔记

Django 语法创建项目框架 django-admin startproject 项目名 创建子app 业务分化,可以优化团队合作,可以明确找锅 python manage.py startapp 子app名 启动项目 python manage.py runserver 项目目录结构 __init__.py: 声明当前文件夹为一个可导入的包 se...

VC中Spin控件的使用

微调按钮设置成set buddy inter选上 然后可以(1)通过 setbuddy+setrange函数    或(2)auto buddy自动选上,只要编辑框的tab order 比微调按钮小1就可以自动了 (另转)VC中Spin控件的使用 http://leichaofu.blog.163.com/blog/static/459481820098...

使用oracle和sqlserver的几点区别

1.部分SQL语句差异 (1)SQL:select top 10 * from tableORA: select * from table where rownum<11(2)SQL:Select * from t1 join t2 on t1.c1=t2.c1ORA: select * from t1,t2 where t1.c1=t2.c1(3...

MFC- socket 编程

一、CAsyncSocket类 CAsyncSocket属于异步非阻塞类。 CAsyncSocket类采用了windows socket中的WSAAsyncSelect模型。CAsyncSocket 类是在很低的层次上对windows socket API进行了封装,它的成员函数和winsock API的函数调用直接对应,一个CAsyncSocket对象代...

SharpGL学习笔记(二) 模型变换(几何变换)

(二) 模型变换 模形变换就是指的在世界坐标系中(world space)做“移动”,“旋转", "缩放"三种操作。 首先要说明的,在Opengl中,是用4x4矩阵进行坐标变换,OpenGL的4x4矩阵是按列排列的,就像下面这样。 所谓的模型变换,就是对这个矩阵进行变换。 描述三维世界你就得先设计三维模形。 在设计三维模形的时候,它是们于模形坐标系中的,...

关于QSocket的释放的一个需要注意的情况(必须先断开连接)

最近在用QtNetwork编写服务器程序进行TCP/IP通信,大体过程如下: 1. 创建一个QTcpServer实例,监听目标IP和端口; 2. 一旦监听到有连接,获取和客户端之间的socket; 3. 使用socket进行通信; 4. 通信结束后,可以手动释放socket,也可以不管它,在释放QTcpServer的时候会把其下的所有socket全部自动释...