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的属性语法介绍(裁剪范围计算)

762 ℃

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

clip-path示例代码介绍:

clip-path: inset(10px 20px 25px 30px);

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%);}

clip-path菱形

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

clip-path梯形

.div{-webkit-clip-path: polygon(20% 0%,80% 0%, 100% 100%, 0% 100%);}

clip-path沙漏

.div{-webkit-clip-path: polygon(0% 0%,100% 0%, 0 100%, 100% 100%);}

clip-path平行

.div{-webkit-clip-path: polygon(30% 0%,100% 0%, 70% 100%, 0% 100%);}

clip-path五边形

.div{-webkit-clip-path: polygon(50% 0%, 100% 36%, 80% 100%, 20% 100%, 0% 36%);}

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%);}

clip-path六边形

.div{-webkit-clip-path: polygon(50% 0%, 100% 24%, 100% 76%, 50% 100%, 0% 76%, 0% 24%);}

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%);}

clip-path箭头

.div{-webkit-clip-path: polygon(0% 20%,66% 20%,100% 50%,66% 80%,0 80%);}

clip-path箭头2

.div{-webkit-clip-path: polygon(0% 33%,66% 33%,66% 0%,100% 50%,66% 100%,66% 66%,0 66%);}

clip-path半圆

.div{-webkit-clip-path:circle(50% at 50% 0%);}

clip-path椭圆

.div{-webkit-clip-path:ellipse(50% 25% at 50% 50%);}

clip-path圆角

.div{-webkit-clip-path:inset(0 round 20%);}

clip-path树叶

.div{-webkit-clip-path:inset(0 round 0 100% 0 100%);}

clip-path水滴

.div{-webkit-clip-path:inset(0 round 0 100% 100% 100%);}

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

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

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

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

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

标签: clip-path, css3语法

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

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

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

当前位置: 网站首页 > 前端知识
本文共计1687个字,预计阅读时长12分钟

基金从业资格考试题库

一站式备考基金从业资格考试,收录2021-2025年模拟题库!呱呱工具箱

AI工作站

收录全球3800+ 款各行各业AI应用,轻轻松松做事!
生活小工具,收录了80多款小工具
上一篇: 介绍几款带有中国风古韵的免费可商用中文字体
下一篇: 推荐9款支持 Vue3 免费开源的前端 UI 组件库
x 打工人ai神器