深入理解與應用CSS clip-path 屬性

clip-path

clip-path是什麼

clip-path 是一個CSS屬性，允許開發者創建一個剪切區域，從而決定元素的哪些部分可見，哪些部分會被隱藏。通過定義這個剪切路徑（clipping path），您可以創造出非矩形的裁剪形狀，使元素內容按特定的幾何形狀展示。

clip-path 的工作原理

clip-path 屬性通過定義裁剪路徑來確定元素的可視區域。這意味着，你可以指定一個形狀或路徑，只有位於這個形狀或路徑內的部分纔會被顯示出來，其餘部分則會被裁剪掉。這種裁剪可以是簡單的幾何形狀，如圓形、橢圓形或多邊形，也可以是複雜的 SVG 路徑。

裁切示例

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

實踐示例

投顧的圖片很大(爲什麼投顧頭像很大，有其他展示需求，想複用同一個圖片)，但是僅需要裁切展示上半部分。，塞進背景後面的小黃圈裏面。做法是使用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路徑引用時，裁剪路徑可以獨立管理，便於複用和修改。

深入理解與應用CSS clip-path 屬性

clip-path

clip-path是什麼

clip-path 的工作原理

裁切示例

支持的基本形狀

內嵌 (inset)

圓形 (`circle`)

橢圓 (`ellipse`)

多邊形 (polygon)

實踐示例

優勢與侷限性

AI模型 Llama 3體驗筆記

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

深入理解與應用CSS clip-path 屬性

vue開發過程常用的JSX語法

搞清楚Promise.all的異常處理

[筆記]前端路由的兩種模式

[筆記]git pull vs git pull --rebase

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

深入理解與應用CSS clip-path 屬性

clip-path

clip-path是什麼

clip-path 的工作原理

裁切示例

支持的基本形狀

內嵌 (inset)

圓形 (circle)

橢圓 (ellipse)

多邊形 (polygon)

實踐示例

優勢與侷限性

圓形 (`circle`)

橢圓 (`ellipse`)