美文网首页
clip-path属性(CSS)

clip-path属性(CSS)

作者: WhiteStruggle | 来源:发表于2020-01-31 01:48 被阅读0次

    MDN

    属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().

    clip-path属性代替了现在已经弃用的剪切 clip属性

    取值:

    • <clip-source>——
      用 <url> 表示剪切元素的路径
    • <basic-shape>——
      一种形状,其大小和位置由<几何盒>值定义。如果没有指定几何框,则边框将用作参考框
    • <geometry-box>——
      如果同 <basic-shape> 一起声明,它将为基本形状提供相应的参考框盒。通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被 border-radius 定义的剪切路径)。几何框盒可以有以下的值中的一个:
    • margin-box——
      使用 margin box 作为引用框。
    • border-box——
      使用 border box 作为引用框。
    • padding-box——
      使用 padding box 作为引用框。
    • content-box——
      使用 content box 作为引用框。
    • fill-box——
      利用对象边界框作为引用框。
    • stroke-box——
      使用笔触边界框(stroke bounding box)作为引用框
    • view-box——
      使用最近的 SVG 视口(viewport)作为引用框。如果viewBox 属性被指定来为元素创建 SVG 视口,引用框将会被定位在坐标系的原点,引用框位于由 viewBox 属性建立的坐标系的原点,引用框的尺寸用来设置 viewBox 属性的宽高值。
    • none——
      不创建的剪切路径

    裁切函数有后面几种,circle()、ellipse()、inset()和polygon()。

    /* Keyword values */
    clip-path: none;
    
    /* <clip-source> values */ 
    clip-path: url(resources.svg#c1);
    
    /* <geometry-box> values */
    clip-path: margin-box;
    clip-path: border-box;
    clip-path: padding-box;
    clip-path: content-box;
    clip-path: fill-box;
    clip-path: stroke-box;
    clip-path: view-box;
    
    /* <basic-shape> values */
    clip-path: inset(100px 50px);
    clip-path: circle(50px at 0 100px);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
    
    /* Box and shape values combined */
    clip-path: padding-box circle(50px at 0 100px);
    
    /* Global values */
    clip-path: inherit;
    clip-path: initial;
    clip-path: unset;
    

    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
               .main{
                   position: absolute;
                   width: 500px;
                   height: 500px;
                   background-color:#999;
                   clip-path: circle(40%);
                   /* clip-path: ellipse(300px 400px at 0 0 ) ; */
                   position: relative;
                   border: 5px red solid;
               }
               .main:hover{
                   background: red;
               }
               img{
                   position: absolute;
                   top: 0;left: 0;right: 0;bottom: 0;
                   margin: auto;
               }
        </style>
    </head>
    <body>
        <div class="main">
            <img src="Taobao_128px_1230507_easyicon.net.ico" alt="">
        </div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:clip-path属性(CSS)

          本文链接:https://www.haomeiwen.com/subject/funwthtx.html