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>

  • 相关阅读:
    zabbix3.4监控Windows-CPU使用率磁盘IO磁盘监控阈值邮件报警详细配置
    网站打开提示Service Unavailable如何解决?
    windows服务器下zabbix agent的安装调试
    如何判断自己的VPS是那种虚拟技术实现的?
    win7/win10下KiWi Syslog服务器的安装与配置
    centos7.x内核参数优化脚本
    centos7.6更改主机名为FQDN格式不生效解决办法
    chmod: changing permissions of 'xxx': Operation not permitted
    编译安装nginx提示./configure: error: C compiler cc is not found
    centos7利用系统镜像修复grub
  • 原文地址:https://www.cnblogs.com/youzhuxiaoyao/p/5685163.html
Copyright © 2011-2022 走看看