zoukankan      html  css  js  c++  java
  • css3锯齿

    左右锯齿

    先写一个div例如<div class="sawtooth">你好。这是一个 div 元素。</div>

    接着用纯css3写锯齿

    .sawtooth {
        /* 相对定位,方便让before和after伪元素绝对定位偏移 */
        position: relative;
        /* 把超出p的部分隐藏起来 */
        overflow: hidden;
    }
     
    .sawtooth:before, .sawtooth:after {
        content: ' ';
         0;
        height: 100%;
        /* 绝对定位进行偏移 */
        position: absolute;
        top: 10px;
    }
     
    .sawtooth:before {
        /* 圆点型的border */
        border-right: 10px dotted white;
        /* 偏移一个半径,让圆点的一半覆盖p */
        left: -5px;
    }
     
    .sawtooth:after {
        /* 圆点型的border */
        border-left: 10px dotted white;
        /* 偏移一个半径,让圆点的一半覆盖p */
        right: -5px;
    }
     
    上线锯齿
    <div></div>

    div{
                 400px;
                height: 400px;
                background-color: red;
                padding: 20px 0;
                overflow: hidden;
                position: relative;
            }
            div:after,div:before{
                content: '';
                display: block;
                 100%;
                position: absolute;
                border-top: 10px dotted yellow;
                transform:translateY(-50%);
            }
            div:after{
                top:0;
                transform:translateY(-50%);
            }
            div:before{
                bottom: 0;
                transform:translateY(50%);
            }
  • 相关阅读:
    (转)ASP连接sql server实例解析
    (转)ASP与sql存储过程
    将博客搬至CSDN
    详细解析Java中抽象类和接口的区别
    蔬菜销售策划
    医学学习
    mlecms v2.2版权
    网页打印设置
    silverlight RadGridView总结系列(转载)
    silverlight RadGridView总结二(转载)
  • 原文地址:https://www.cnblogs.com/hlhs/p/11944588.html
Copyright © 2011-2022 走看看