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

最新推荐文章于 2024-09-19 13:53:25 发布

进击的totoro

最新推荐文章于 2024-09-19 13:53:25 发布

阅读量2.9k

点赞数 28

分类专栏： HTML5+CSS3 文章标签： css 前端

本文链接：https://blog.csdn.net/wuyinghong_/article/details/136544678

版权

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 {