美文网首页
图片边框(九宫格)

图片边框(九宫格)

作者: 智多牛 | 来源:发表于2016-12-21 10:53 被阅读0次
    • 向内偏移(slice属性),标识九宫格的其中一个格子的大小
        <!-- 节点 -->
        <div>123</div>
            
        <!-- 样式 -->
        <style>
        
            div
            {
                width : 200px;
                height: 200px;
                margin: 100px;
                background-color: #999;
                
                /*图片路径*/
                border-image-source:url(border.png);
                
                /*向内偏移*/
                border-image-slice:26;
                
                /*边框宽度*/
                border-image-width:5;
                
                /*超出边框的量(边框的padding)*/
                border-image-outset:5;
                
                /*平铺(repeat)、铺满(round)或拉伸(stretch)*/
                border-image-repeat:stretch;
            }
            
        </style>
    
    九宫格

    相关文章

      网友评论

          本文标题:图片边框(九宫格)

          本文链接:https://www.haomeiwen.com/subject/ojqqvttx.html