• 深入理解 Css3 的 clip-path


    clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。clip-path属性代替了现在已经弃用的剪切 clip属性。clip-path的属性值可以是以下几种:

    • clip-path属性值为inset;
      inset是将元素剪切为一个矩形,如clip-path:inset(10px),括号内的值类似于margin、padding值的写法,可以写一个值,也可以写多个值。
    • clip-path属性值为circle;
      circle是将元素剪切为一个圆形,如clip-path: circle(100px at 50% 50%),100px表示圆的直径,50% 50%表示圆心。
    • clip-path属性值为ellipse;
      circle是将元素剪切为一个椭形,如ellipse(150px 100px at 50% 50%),150px 表示椭圆的水平半径,100px表示椭圆的垂直半径,50% 50%表示圆心。
    • ...

    clip-path还可以有多种,如polygon、path、svg等。更多参考:clip-path

    最后来看一个DEMO

  • 相关阅读:
    SVG平移和缩放(鼠标滚轮)的实现
    CSS之容器水平垂直居中
    CSS之flex布局
    CSS之鼠标悬停——内容变深/变浅
    CSS之clip-path绘制多边形
    axios
    .Net 反射
    Redis
    .Net Core GRPC报错
    Python 京东云无线宝消息推送
  • 原文地址:https://www.cnblogs.com/jone-chen/p/10832836.html
Copyright © 2020-2023  润新知