border-image使用过程中遇到的几个问题
2016-01-03 19:11
393 查看
这次年货,为了增添气氛,很多地方都用了边框,由于边框高度的不固定,给构建着实带了不小的麻烦。
通常我们处理边框的方法,无非以下两种方案:
1.切整张图片,做背景。
2.切上中下,进行拼接处理。
但是遇到,边框多种样式的时候,我可能就需要支招,切得手软,为了解决这些问题,我们尝试了border-image。
使用border-image,我们无非弄明白以下几个属性就能使用了:
但是在使用过程中,可能会遇到两个这样的问题:
1.border-image使用中会产生多余的边框(手q中,在一些低端的andirod中)。
![](http://mtd.jd.com/wiki/lib/exe/fetch.php?w=400&tok=760405&media=blog:2016:01:ecded3e3-35e0-4a4c-987d-74816ecacd29.png)
2.border-image-repeat的属性值,repeat 和 round 如何选择区分。
针对这两个问题,经过一些尝试,尝试发现:
1.border-image使用中会产生多余的边框,是由于边框图片边缘没有预留一定的空间导致的,这里建议预留1px,例图:
边框易产生多余的边框(低端机)
![](http://mtd.jd.com/wiki/lib/exe/fetch.php?w=200&tok=3f4528&media=blog:2016:01:78d20ba0-9e77-4115-a48d-7a53948a5d66.png)
边框不会产生多余的边框
![](http://mtd.jd.com/wiki/lib/exe/fetch.php?w=200&tok=899ae6&media=blog:2016:01:b402fa8c-d187-47e4-be51-66d68091d5c3.png)
2.repeat 和 round 如何选择区分,round会压缩(或伸展)图片大小使其正好在区域内显示,而repeat是不管三七二十一直接重复的,而且是居中重复,多数情况建议大家可以用round,repeat会导致叠加现象,下面同种情况下实现的效果:
这个是w3cschool里面的例子,我加了round,repeat 比对:
效果:
![](http://mtd.jd.com/wiki/lib/exe/fetch.php?w=500&tok=270c6d&media=blog:2016:01:6959.jpg)
很显然,repeat出现了,叠加现象,对于我们构建来说,肯定不是特别好的,所以建议用round。
通常我们处理边框的方法,无非以下两种方案:
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中)。
![](http://mtd.jd.com/wiki/lib/exe/fetch.php?w=400&tok=760405&media=blog:2016:01:ecded3e3-35e0-4a4c-987d-74816ecacd29.png)
2.border-image-repeat的属性值,repeat 和 round 如何选择区分。
针对这两个问题,经过一些尝试,尝试发现:
1.border-image使用中会产生多余的边框,是由于边框图片边缘没有预留一定的空间导致的,这里建议预留1px,例图:
边框易产生多余的边框(低端机)
![](http://mtd.jd.com/wiki/lib/exe/fetch.php?w=200&tok=3f4528&media=blog:2016:01:78d20ba0-9e77-4115-a48d-7a53948a5d66.png)
边框不会产生多余的边框
![](http://mtd.jd.com/wiki/lib/exe/fetch.php?w=200&tok=899ae6&media=blog:2016:01:b402fa8c-d187-47e4-be51-66d68091d5c3.png)
2.repeat 和 round 如何选择区分,round会压缩(或伸展)图片大小使其正好在区域内显示,而repeat是不管三七二十一直接重复的,而且是居中重复,多数情况建议大家可以用round,repeat会导致叠加现象,下面同种情况下实现的效果:
这个是w3cschool里面的例子,我加了round,repeat 比对:
<!DOCTYPE html> <html> <head> <style> div { border:15px solid transparent; width: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>
效果:
![](http://mtd.jd.com/wiki/lib/exe/fetch.php?w=500&tok=270c6d&media=blog:2016:01:6959.jpg)
很显然,repeat出现了,叠加现象,对于我们构建来说,肯定不是特别好的,所以建议用round。
相关文章推荐
- C语言-动态内存分配
- 【codevs1002】搭桥
- 数据泵导入导出
- DNS服务搭建
- JS将毫秒时间戳转换成合适的时间字符串
- 计算机视觉方面2016年重要会议deadline
- Android Studio使用教程
- Android Studio使用教程
- 轻松scrum之旅---敏捷开发故事
- C++程序设计课后习题及解答(第七章)
- 关于HTTPS转载的文章
- Android CardView 简介
- CVPR14与图像视频检索相关的论文
- 数据结构02--队列
- STM32外设驱动篇——DHT11温湿度传感器
- 出乎意料的回答
- xcodeheader search 配置
- 抽象工厂模式
- 数据结构JAVA图的基本操作
- C#使用ping命令检查设备状态