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>

  • 相关阅读:
    基于51单片机的Uart串口通信协议
    基于STM32F103和Cube的输入捕获例程
    基于STM32F429和HAL库的CAN收发例程
    基于STM32F429的TFT0.96屏幕驱动
    基于STM32F429和Cube的ov2640程序
    基于STM32F429和Cube的主从定时器多通道输出固定个数的PWM波形
    基于STM32F429,Cubemx的SAI音频播放实验
    基于STM32F429的内存管理
    基于STM32F429,Cubemx的SDHC卡的基本Fatfs文件移植
    基于STM32F429的ADS1115驱动程序
  • 原文地址:https://www.cnblogs.com/youzhuxiaoyao/p/5685163.html
Copyright © 2011-2022 走看看