zoukankan      html  css  js  c++  java
  • clip-path

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /*Circle: circle(radius at x-axis y-axis)
            Ellipse: ellipse(x-rad y-rad at x-axis y-axis)
            Polygon: polygon(x-axis y-axis, x-axis y-axis, … )
            Inset: inset(top rightright bottombottom left round top-radius rightright-radius bottombottom-radius left-radius) 先截取然后在机上圆角*/
            .clip{200px;height:200px;-webkit-clip-path: polygon(0px 0px, 100px 87px,24px 104px);clip-path: polygon(0px 0px, 100px 87px,24px 104px);background:#f60;}
            .clip2{200px;height:200px;-webkit-clip-path:circle(50% at 50% 50%);clip:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);background:#ccc;}
            .clip3{200px;height:200px;-webkit-clip-path:ellipse(50% 20% at 50% 50%);background:green;}
            .clip4{200px;height:200px;-webkit-clip-path:inset(10px 50px 0px 50px round 10px 20px);background:#000;}
            .star{100px;height:100px;
                -webkit-clip-path:polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
                clip-path:polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
                background:#f50c27;
            }
            .clip5{300px;height:300px;-webkit-clip-path:url("#svgPath2");background:#f60;}
            .svg-clipped {-webkit-clip-path: url("#svgPath");clip-path: url("#svgPath");position:absolute;}
        </style>
    </head>
    <body>
        <div class="clip5"></div>
        <div style="500px;height:500px;">
            <img class="svg-clipped" alt="Cherry Blossoms." src="flowers.jpg">
            <svg height="0" width="0">
                <defs>
                    <clipPath id="svgPath2">
                        <text font-style="italic" font-weight="700" font-size="150px" font-family="微软雅黑" lengthAdjust="spacing" textLength="800" y="300" x="0"> Blossom </text>
                    </clipPath>
                    <clipPath id="svgPath">
                        <text font-style="italic" font-weight="700" font-size="150px" font-family="微软雅黑" lengthAdjust="spacing" textLength="800" y="500" x="0"> Blossom </text>
                    </clipPath>
                </defs>
            </svg>
        </div>


        <input type="text" placeholder="xdsadsadsa">
        <div style="color:#f60">style="color:#f60"</div>
        <div class="clip"></div>


        <div class="clip2"></div>


        <div class="clip3"></div>


        <div class="clip4"></div>


        <div class="star"></div>


    </body>


    </html>

  • 相关阅读:
    逆序对的相关问题:bzoj1831,bzoj2431
    bzoj3211,bzoj3038
    hdu 1179最大匹配
    hdu 3038带权并查集
    poj 1733离散化(map)+并查集
    codeforces 369B
    poj 1456
    POJ 1988相对偏移
    poj 1986tarjan模板题
    poj 1330lca模板题离线算法
  • 原文地址:https://www.cnblogs.com/youzhuxiaoyao/p/5685163.html
Copyright © 2011-2022 走看看