zoukankan      html  css  js  c++  java
  • border-image使用过程中遇到的几个问题

    这次年货,为了增添气氛,很多地方都用了边框,由于边框高度的不固定,给构建着实带了不小的麻烦。

    通常我们处理边框的方法,无非以下两种方案:

    1.切整张图片,做背景。

    2.切上中下,进行拼接处理。

    但是遇到,边框多种样式的时候,我可能就需要支招,切得手软,为了解决这些问题,我们尝试了border-image。

    使用border-image,我们无非弄明白以下几个属性就能使用了:

    border-image-source	用在边框的图片的路径。	
    border-image-slice	图片边框向内偏移。	
    border-image-width	图片边框的宽度。	
    border-image-outset	边框图像区域超出边框的量。	
    border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
    

    但是在使用过程中,可能会遇到两个这样的问题:

    1.border-image使用中会产生多余的边框(手q中,在一些低端的andirod中)。

    2.border-image-repeat的属性值,repeat 和 round 如何选择区分。

    针对这两个问题,经过一些尝试,尝试发现:

    1.border-image使用中会产生多余的边框,是由于边框图片边缘没有预留一定的空间导致的,这里建议预留1px,例图:

    边框易产生多余的边框(低端机)

    边框不会产生多余的边框

    2.repeat 和 round 如何选择区分,round会压缩(或伸展)图片大小使其正好在区域内显示,而repeat是不管三七二十一直接重复的,而且是居中重复,多数情况建议大家可以用round,repeat会导致叠加现象,下面同种情况下实现的效果:

    这个是w3cschool里面的例子,我加了round,repeat 比对:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    border:15px solid transparent;
    300px;
    padding:10px 20px;
    }
    
    #round
    {
    -moz-border-image:url(/i/border.png) 30 30 round;	/* Old Firefox */
    -webkit-border-image:url(/i/border.png) 30 30 round;	/* Safari and Chrome */
    -o-border-image:url(/i/border.png) 30 30 round;		/* Opera */
    border-image:url(/i/border.png) 30 30 round;
    }
    
    #stretch
    {
    -moz-border-image:url(/i/border.png) 30 30 repeat;	/* Old Firefox */
    -webkit-border-image:url(/i/border.png) 30 30 repeat;	/* Safari and Chrome */
    -o-border-image:url(/i/border.png) 30 30 repeat;		/* Opera */
    border-image:url(/i/border.png) 30 30 repeat;
    }
    </style>
    </head>
    <body>
    
    <div id="round">在这里,图片铺满整个边框。</div>
    <br>
    <div id="stretch">在这里,图片被拉伸以填充该区域。</div>
    
    <p>这是我们使用的图片:</p>
    <img src="/i/border.png">
    
    </body>
    </html>
    

      

    效果:

    很显然,repeat出现了,叠加现象,对于我们构建来说,肯定不是特别好的,所以建议用round。

  • 相关阅读:
    Linux下C程序的反汇编【转】
    数据在内存中的存储方式( Big Endian和Little Endian的区别 )(x86系列则采用little endian方式存储数据)【转】
    linux arm的存储分布那些事之一【转】
    linux arm mmu基础【转】
    linux 进程内存解析【转】
    如何更方便的查看Linux内核代码的更新记录【转】
    设备树解析【转】
    分析内核源码,设备树【转】
     Meltdown论文翻译【转】
    device tree --- #address-cells and #size-cells property【转】
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/5096928.html
Copyright © 2011-2022 走看看