搞定clip-path属性[专栏2]_clip-path 兼容性-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_72870863/article/details/126167041

本文详细介绍了CSS3的clip-path属性，用于定义元素的可视区域。通过circle、ellipse、inset等专有名词可以轻松创建简单图形，如圆形、椭圆和圆角矩形。同时，文章提供了多个实例，包括五角星、菱形、X形状和三角形等复杂图形的绘制方法，展示了clip-path的灵活性和实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、clip-path作用

属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。兼容性页蛮高的。

-webkit-clip-path解决兼容性问题

clip-path可以通过专有名词属性值很容易的画出一些简单的图形，例如圆(circle)，椭圆(ellipse)，圆角矩形(inset)：

绘制圆形设置悬停后，按钮变大的效果案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

    .div1 {

        width: 320px;

        height: 320px;

        border: 1px solid red;

        background: url(./yuanquan.png) no-repeat;

        /* background: url(./flower.jpg) no-repeat; */

        background-size: cover;

        /* 裁剪出圆形区域 */

         /* clip-path: circle(40px at 100px 100px); */

        clip-path: circle(40px at center);

        /* 控制变化时间 */

        transition: clip-path .8s;

    }

    .div1:hover{

         /* clip-path: circle(80px at 100px 100px); */

        clip-path: circle(80px at center);

    }

    </style>

</head>

<body>

    <div class="div1"></div>

</body>

</html>

注意1使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续的线段，若线段彼此有交集，面积区域就会有相减的状况发生（当然如果这是你要的效果就无妨了）。

注意2如果绘制时采用「比例」的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想像的就会有落差，使用「像素」绘制就没有这种问题。