首页 > 其他分享 >深入理解与应用CSS clip-path 属性

深入理解与应用CSS clip-path 属性

时间:2024-03-07 20:24:54浏览次数:31  
标签:0rem clip 100% 50% path circle CSS

clip-path

clip-path是什么

clip-path 是一个CSS属性,允许开发者创建一个剪切区域,从而决定元素的哪些部分可见,哪些部分会被隐藏。通过定义这个剪切路径(clipping path),您可以创造出非矩形的裁剪形状,使元素内容按特定的几何形状展示。

clip-path 的工作原理

clip-path 属性通过定义裁剪路径来确定元素的可视区域。这意味着,你可以指定一个形状或路径,只有位于这个形状或路径内的部分才会被显示出来,其余部分则会被裁剪掉。这种裁剪可以是简单的几何形状,如圆形、椭圆形或多边形,也可以是复杂的 SVG 路径。

裁切示例

image-20240307191915049

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        text-align: center;
        background-color: #888;
      }
      img {
        width: 200px;
      }
      .item {
        margin-right: 10px;
      }
      .text {
        font-size: 14px;
        color: #666;
      }
      .clip-path1 {
        clip-path: inset(20px);
      }
      .clip-path2 {
        clip-path: inset(0rem 0rem 0rem 1rem);
      }
      .clip-path3 {
        clip-path: inset(0% 50px 0% 50px round 50%);
      }
      .clip-path4 {
        clip-path: inset(1rem 0rem 0rem 1rem round 0rem 2rem 5rem 0rem);
      }
      .flex {
        display: flex;
      }
      .hide {
        display: none;
      }
      .circle1 {
        clip-path: circle(50% at 50% 50%);
      }
      .circle2 {
        clip-path: circle(20% at 50% 50%);
      }
      .circle3 {
        clip-path: circle(50% at 0% 0%);
      }
      .element:hover {
        clip-path: circle(75% at 50% 50%);
        transition: clip-path 0.5s ease;
        opacity: 0.7; /* 当鼠标悬停时,图片透明度变为0.7 */
        transform: scale(1.1); /* 或放大图片 */
        cursor: pointer; /* 改变鼠标指针样式为手型 */
    }
    .ellipse1 {
      clip-path: ellipse(20% 50% at 50% 50%);

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

    .shape {
      width: 200px;
      height: 200px;
      background-color: red;
      /* transition: clip-path 1s ease-in-out; */
    }

    .shape:hover {
      /* clip-path: circle(50% at 50% 50%); */
    }

    /* 动画实现从方形到圆形的变化 */
    @keyframes shape-transform {
      0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      }
      100% {
        clip-path: circle(50% at 50% 50%);
      }
    }

    /* 如果你想在悬停时使用动画而不是直接转换,取消上面:hover的直接样式,改为下面这一行 */
    .shape:hover { animation: shape-transform 1s forwards; }
  </style>
    </style>
  </head>
  <body>
    <p>原始图</p>
    <div class="box">
      <img
        src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
        alt=""
        class="element"
      />
    </div>
    <hr />
    <!-- inset内嵌 -->
    <div class="flex">
      <div class="item">
        <p class="text">clip-path: inset(20px);</p>
        <div class="box">
          <img
            src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
            alt=""
            class="clip-path"
          />
        </div>
      </div>
      <div class="item">
        <p class="text">clip-path: inset(0rem 0rem 0rem 1rem);</p>
        <div class="box">
          <img
            src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
            alt=""
            class="clip-path2"
          />
        </div>
      </div>
      <div class="item">
        <p class="text">clip-path: inset(0% 50px 0% 50px round 50%);</p>
        <div class="box">
          <img
            src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
            alt=""
            class="clip-path3"
          />
        </div>
      </div>
      <div class="item">
        <p class="text">
          clip-path: inset(1rem 0rem 0rem 1rem round 0rem 2rem 5rem 0rem);
        </p>
        <div class="box">
          <img
            src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
            alt=""
            class="clip-path4"
          />
        </div>
      </div>
    </div>
    <hr />
    <!-- circle圆形 -->
    <div class="flex">
      <div class="item">
        <p class="text">circle(50% at 50% 50%)</p>
        <div class="box">
          <img
            src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
            alt=""
            class="circle1"
          />
        </div>
      </div>
      <div class="item">
        <p class="text">circle(20% at 50% 50%)</p>
        <div class="box">
          <img
            src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
            alt=""
            class="circle2"
          />
        </div>
      </div>
      <div class="item">
        <p class="text">circle(50% at 0% 0%)</p>
        <div class="box">
          <img
            src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
            alt=""
            class="circle3"
          />
        </div>
      </div>
    </div>

    <!-- ellipse 椭圆  -->
    <div class="flex">
      <div class="item">
        <p class="text">ellipse(20% 50% at 50% 50%)</p>
        <div class="box">
          <img
            src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
            alt=""
            class="ellipse1"
          />
        </div>
      </div>
    </div>
    <hr />
    
    <!-- 多边形 (polygon) -->
    <div class="flex">
      <div class="item">
        <p class="text">polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%)</p>
        <div class="box">
          <img
            src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
            alt=""
            class="polygon1"
          />
        </div>
      </div>
    </div>
    <div class="shape hide"></div>
  </body>
</html>

支持的基本形状

内嵌 (inset)

这创建了一个内嵌的剪裁区域,其中的四个值分别对应上、右、下、左的剪裁量。

参数:
inset( top right bottom left round <border-radius> )
例如参数最多的设置写法:
.clip-path4 {
  	clip-path: inset(1rem 0rem 0rem 1rem round 0rem 2rem 5rem 0rem);
 }

圆形 (circle)

这将创建一个圆形剪裁区域,其中50%是圆的半径,at 50% 50%指定了圆心的位置(相对于元素的宽高)。

参数:clip-path: circle(radius at x-axis y-axis);
第一个参数是必需的,表示圆形裁剪区域的半径。
第二个参数是可选的,用于指定圆形裁剪区域的圆心位置。如果省略这个参数,默认圆心位于元素的中心
.circle2 {
    clip-path: circle(20% at 50% 50%);
  }
椭圆 (ellipse)

这里创建了一个椭圆形剪裁区域,其中第一个值和第二个值分别是椭圆的水平半径和垂直半径,at 50% 50%指定了椭圆中心的位置。

参数:clip-path: ellipse(rx ry at x-axis y-axis);
第一个和第二个参数是必需的,分别表示椭圆的水平半径(X轴半径)和垂直半径(Y轴半径)。
.ellipse1 {
    clip-path: ellipse(20% 50% at 50% 50%);
  }
多边形 (polygon)

函数用于创建一个任意多边形裁剪区域,它接受一系列坐标对作为参数,每个坐标对代表多边形的一个顶点。

参数:clip-path: polygon(x1 y1, x2 y2, ..., xn yn);
.polygon1 {
    clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);
  }

实践示例

image-20240307195832089

投顾的图片很大(为什么投顾头像很大,有其他展示需求,想复用同一个图片),但是仅需要裁切展示上半部分。,塞进背景后面的小黄圈里面。做法是使用clip-path属性来裁切图片,仅展示想要展示的那部分。简略代码如下:

<!-- 投顾头像 -->
<div class="consult-icon-image" @click="linkIC">
    <img :src="consultor.img" />
</div>

<style>
 .consult-icon-image {
      position: relative;
      top: 2px;
      display: inline-block;
      width: 60px !important;
      height: 60px !important;
      border-radius: 50%;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      background: linear-gradient(137.97deg, #fff3ea 0%, #f5b39b 120.86%);
      border: 2px solid #f9e2c7;
      box-sizing: border-box;
      vertical-align: top;

      img {
          // 需要放大投顾头像
          clip-path: inset(0 0.6rem 1.3rem 0.6rem round 100% 100% 90% 90%);
          position: absolute;
          width: 150%;
          top: -34%;
          left: 50%;
          transform: rotateY(-180deg) translateX(50%);
      }
  }
</style>

优势与局限性

  • 设计自由度:极大地提高了网页设计的灵活性,摆脱了传统的矩形框架约束。
  • 性能优化:相比于直接使用图片遮罩,clip-path 的渲染效率更高,减轻服务器负担,提高页面加载速度。
  • 响应式设计:结合CSS媒体查询,可以轻松实现不同屏幕尺寸下的响应式裁剪效果。
  • 复用性与易维护性:尤其是当配合SVG路径引用时,裁剪路径可以独立管理,便于复用和修改。

标签:0rem,clip,100%,50%,path,circle,CSS
From: https://www.cnblogs.com/wuyinghong/p/18059665

相关文章

  • macOS m1芯片报错 java.lang.UnsatisfiedLinkError: no taos in java.library.path
    项目中有用到TDengine,MacOSm1芯片本地开发启动项目报错如下java.lang.UnsatisfiedLinkError:notaosinjava.library.path方案一(推荐)以上错误是因为java在连接TDengine数据库的时候没有找到本地函数库。本地安装一下TDengine,然后在/usr/local/lib/下就会有taos函数库。因此......
  • css样式属性 使用汇总,补齐前端短板
    ---------------index.css常用网站css样式属性使用汇总1-------------/*先删除默认的内外边距*/*{margin:0;padding:0;}body{background-color:#fafafa;height:2000px;}li{list-style:none;/*取消li的符号*/}/*顶部导航栏开......
  • Though Our Paths May Diverge(JSOI 2024 游记)
    Isn’titsupposedtobesunnynow?且当是JSOI2024的游记吧。省选前的精神状态处于一种微妙的平衡。确实也不断在给自己心理暗示,自己有省队水平,但是其实无论是哪边的模拟打得都属于比较稀烂的水平,有的时候真的是一题不会签不上到。跟不上zhy和黄色蜜蜂的节奏啊,大概就......
  • vscode 两种定位跳转的方法 ctrl+p 方法1 path:行号 方法2 #变量名 - 针对$store变量
    vscode两种定位跳转的方法ctrl+p方法1path:行号方法2#变量名-针对$store变量不好找的方案方法1可以备注在代码里面问题$store的变量不能跳转,有跳转插件也不能跳转解决方案方法1备注上文件地址和行号,然后选择备注那行ctrl+cctrl+p回车不足的地方是代码变了,行号不......
  • HTML+CSS 实现简单打印页
    代码:<!DOCTYPEhtml><html><head><title>分页打印示例</title><style>/*打印样式*/@mediaprint{.page{page-break-after:always;/*每个.page元素后都分页*/}}</style>......
  • OS的Path模块
    OS的Path模块basename#返回文件名部分pathvar="/home/wangwen/mywork/ceshi.py"pathvar=__file__res=os.path.basename(pathvar)print(res)#outceshi.pydirname#返回路径部分pathvar="/home/wangwen/mywork/ceshi.py"pathvar=__file__res......
  • 前端css阴影画图
    在线演示地址:css阴影画图一,在css中有一个box-shadow属性,可以设置元素的阴影。.item{width:50px;height:50px;background:#009688;box-shadow:50px0red,100px0px#000;}效果:二,box-shadow可以添加多个。.item{width:50px;height:......
  • Nuxt3-tailwindcss使用
    Nuxt3使用 tailwindcss文档:https://www.tailwindcss.cn/docs/installation安装文档:https://tailwindcss.nuxtjs.org/getting-started/installation1、安装 @nuxtjs/tailwindcssyarnadd-D@nuxtjs/tailwindcss2、nuxt.config.ts中配置exportdefaultdefineNuxtConfig......
  • Spring-PathMatcher
    1.概述PathMatcher是Spring的一个概念模型接口,该接口抽象建模了概念"路径匹配器",一个"路径匹配器"是一个用于路径匹配的工具。位于Spring-core包中util包下。2.PathMatcher接口源码packageorg.springframework.util;importjava.util.Comparator;importjava.util.......
  • css div 三张背景图片
    cssdiv宽度1300高度46,同时给它设置三张背景图片堆叠同时显示,其一图片宽度1300高度46,铺满整个div且距离最左侧偏移22px,其二图片宽度44,高度43,在div的最左端,其三图片宽度83,高度43,在div的最右端,他们同时垂直居中在div中  .container{width:1300px;height:4......