web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

css3中clip-path的属性语法介绍(裁剪范围计算)

722 ℃

clip-path属性用于裁剪CSS的形状或元素。使用inset()函数时,你提到的四个参数(上,右,下,左)确实定义了一个矩形的边界,矩形以外的部分将被裁剪。这四个参数的值的单位可以是像素(px)或百分比(%),但使用像素单位时,确实可能会造成页面的重绘。这主要是因为在某些情况下,像素单位可能会导致浏览器的重排或重绘,从而影响性能。

clip-path示例代码介绍:

复制代码clip-path: inset(10px 20px 25px 30px);
  • 1

clip-path的属性语法讲解

-webkit-clip-path这里加-webkit- 是为了兼容老版本的chrome和safari;

polygon 这个表示剪切路径是”多边形“,那么后边就是多边形各顶点的坐标;

50% 0%, 0 100%, 100% 100%这些就是顶点坐标了:

以逗号分隔的是3个顶点;每个顶点的x,y坐标以空格分隔,以左上角为起点;坐标可以用px像素,也可以用%百分比。

裁切的路径,除了polygon以外,还有circle圆形,inset矩形,ellipse椭圆等,我们在后面例子中会有示范。

clip-path三角形

复制代码.div{ -webkit-clip-path: polygon(50% 0%, 0 100%, 100% 100%);}
  • 1

clip-path菱形

复制代码.div{-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}
  • 1

clip-path梯形

复制代码.div{-webkit-clip-path: polygon(20% 0%,80% 0%, 100% 100%, 0% 100%);}
  • 1

clip-path沙漏

复制代码.div{-webkit-clip-path: polygon(0% 0%,100% 0%, 0 100%, 100% 100%);}
  • 1

clip-path平行

复制代码.div{-webkit-clip-path: polygon(30% 0%,100% 0%, 70% 100%, 0% 100%);}
  • 1

clip-path五边形

复制代码.div{-webkit-clip-path: polygon(50% 0%, 100% 36%, 80% 100%, 20% 100%, 0% 36%);}
  • 1

clip-path五角星

复制代码.div{-webkit-clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
  • 1

clip-path六边形

复制代码.div{-webkit-clip-path: polygon(50% 0%, 100% 24%, 100% 76%, 50% 100%, 0% 76%, 0% 24%);}
  • 1

clip-path六角星

复制代码.div{-webkit-clip-path: polygon( 50% 0%, 66% 24%,100% 24%, 82% 50%,100% 76%,66% 76%, 50% 100%, 34% 76%,0% 76%,18% 50%, 0% 24%,34% 24%);}
  • 1

clip-path箭头

复制代码.div{-webkit-clip-path: polygon(0% 20%,66% 20%,100% 50%,66% 80%,0 80%);}
  • 1

clip-path箭头2

复制代码.div{-webkit-clip-path: polygon(0% 33%,66% 33%,66% 0%,100% 50%,66% 100%,66% 66%,0 66%);}
  • 1

clip-path半圆

复制代码.div{-webkit-clip-path:circle(50% at 50% 0%);}
  • 1

clip-path椭圆

复制代码.div{-webkit-clip-path:ellipse(50% 25% at 50% 50%);}
  • 1

clip-path圆角

复制代码.div{-webkit-clip-path:inset(0 round 20%);}
  • 1

clip-path树叶

复制代码.div{-webkit-clip-path:inset(0 round 0 100% 0 100%);}
  • 1

clip-path水滴

复制代码.div{-webkit-clip-path:inset(0 round 0 100% 100% 100%);}
  • 1

利用纯css3语法做一个图片瀑布流效果

面试题:css3语法中新增哪些伪类?

css3语法中新增了哪些选择器?

css3语法如何实现动画旋转效果(代码介绍)

css3语法如何做到单词不被分割

标签: clip-path, css3语法

上面是“css3中clip-path的属性语法介绍(裁剪范围计算)”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_13620.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > 前端知识
本文共计1687个字,预计阅读时长12分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一个免费可商用psd文件素材网站——FreePik
下一篇: 一行代码轻松实现优雅的过渡动画插件——AutoAnimate
回到顶部
x 打工人ai神器