zoukankan      html  css  js  c++  java
  • CSS3实现边框锯齿效果

    通过CSS3的linear-gradient实现的

    <div class="bg"></div>

    .bg{

        300px;

        height:50px;

        background:#caca8c;

        background-image:-webkit-gradient(linear,50% 0,0 100%,

                                            from(transparent),

                                            color-stop(.5,transparent),

                                            color-stop(.5,#d86707),

                                            to(#d86707)    

                        ),

                        -webkit-gradient(linear,50% 0,100% 100%,

                                            from(transparent),

                                            color-stop(.5,transparent),

                                            color-stop(.5,#d86707),

                                            to(#d86707)                                            

                        );

        background-image:-moz-linear-gradient(50% 0 -45deg,

                                    transparent,

                                    transparent 50%,

                                    #d86707 50%,

                                    #d86707                                            

                        ),-moz-linear-gradient(50% 0 -135deg,

                                    transparent,

                                    transparent 50%,

                                    #d86707 50%,

                                    #d86707                                            

                        );                                

        background-size:30px 15px;

        background-repeat:repeat-x;

        background-position:0 100%;                    

    }

  • 相关阅读:
    06. 如何去掉数组中的重复性数据
    01. 作用域和值类型引用类型的传递
    韩昊 20190919-5 代码规范,结对
    韩昊 20190919-6 四则运算试题生成,结对
    韩昊 20190919-2 功能测试
    韩昊20190912-1 每周例行报告
    将py文件打包为exe文件方法
    关于四个定义的理解
    韩昊 20190912-2 命令行
    韩昊 20190905-1 每周例行报告
  • 原文地址:https://www.cnblogs.com/mm2015/p/5881313.html
Copyright © 2011-2022 走看看