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

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

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;

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>

　　

效果：

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

border-image使用过程中遇到的几个问题的更多相关文章

  1. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  2. Python爬虫（图片）编写过程中遇到的问题

    最近我突然对网络爬虫开窍了,真正做起来的时候发现并不算太难,都怪我以前有点懒,不过近两年编写了一些程序,手感积累了一些肯定也是因素,总之,还是惭愧了.好了,说正题,我把这两天做爬虫的过程中遇到的问题总 ...

  3. 跟我extjs5(03--在项目过程中加载文件)

    跟我extjs5(03--在项目过程中加载文件) 上一节中用sencha工具自己主动创建了一个项目.而且能够在浏览器中查看. 如今我们来看看js类载入过程. 例如以下图所看到的: watermark/ ...

  4. javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  5. WINDOWS系统下MYSQL安装过程中的注意事项

    1.首先MySQL的安装方式有两种:一种是MSI安装方式,很简单就像安装Windows软件一样.另外一种就是ZIP安装方式.这种相对而言比较麻烦.新手推荐MSI安装方式. 安装方式有以下两种: MSI ...

  6. 【转】SQL Server -- 已成功与服务器建立连接，但是在登录过程中发生错误

    SQL Server -- 已成功与服务器建立连接,但是在登录过程中发生错误 最近在VS2013上连接远程数据库时,突然连接不上,在跑MSTest下跑的时候,QTAgent32 crash.换成IIS ...

  7. zabbix 3.0.3 (nginx)安装过程中的问题排错记录

    特殊注明:安装zabbix 2.4.8和2.4.6遇到2个问题,如下:找了很多解决办法,实在无解,只能换版本,尝试换(2.2.2正常 | 3.0.3正常)都正常,最后决定换3.0.3 1.Error ...

  8. C语言调试过程中duplicate symbol错误分析

    说明:在我们调试C语言的过程中,经常会遇到duplicate symbol错误(在Mac平台下利用Xcode集成开发环境).如下图: 一.简单分析一下C语言程序的开发步骤. 由上图我们可以看出C语言由 ...

  9. 测试或运维工作过程中最常用的几个linux命令？

     大家在测试工作过程中,可能会遇到需要你去服务器修改一些配置文件,譬如说某个字段的值是1 则关联老版本,是0则关联新版本,这时候你可能就需要会下vi的命令操作:或者查看session设置的时长,可能需 ...

随机推荐

  1. linux环境中通过useradd命令,创建用户的时候指定用户的base-dir

    需求说明: 今天一个同事,问了一个这样的问题,在linux环境中,创建用户的时候,默认的是在/home目录下创建一个与用户名相同的家目录, 如何能够将这个/home更换成一个其他的,比如/opt/ap ...

  2. Win7下telnet使用

    出于安全考虑,win7已经禁用了telnet这一功能, telnet是明文传输的,安全性很差. 知道了这一点就不奇怪为什么在win7下不能使用telnet了,下面就详细介绍下如何重新开启telnet服 ...

  3. 关于测试中哪些信息需要放到jira上面

    1.每个新需求的功能点,全部在jira上一一呈现 2.每个bug也一样在jira上一一呈现 3.任务一个需要优化改进的点也一一在jira上呈现 然后程序员一直开发新功能和修改新bug,测试人员负责bu ...

  4. 安卓webview子线程网络请求，怎么获得结果？

    向webview注入网络上的js,就需要请求js的url.但不允许在主线程直接发http请求,需要开子线程,开了子线程后,子线程就自己运行,主线程也自己运行,但是我的主线程需要子线程的结果才能继续往下 ...

  5. 给button添加边框和圆角

    button是我们经常用到的控件,我把它的属性罗列一下: UIButton *Button = [[UIButton alloc] initWithFrame:CGRectMake(, , , )]; ...

  6. 安装.NET Framework 3.5

    https://www.microsoft.com/zh-CN/download/details.aspx?id=22 https://docs.microsoft.com/zh-cn/dotnet/ ...

  7. BugHD 与你的应用一起成长

    BugHD 新增功能 1.新增安装量.启动量的统计功能 BugHD SDK 1.3.0新增安装量.启动量的统计功能,在崩溃分析页面右上角可看到安装量和启动量. BugHD 体验优化 1.Android ...

  8. Android学习之AutoCompleteTextView

    AutoCompleteTextView有点类似于EditText和Spinner的混合体.当用户在输入时,如果应用程序的文本输入框中使用了自动完成控件,预输入文本被看作是一个前缀过滤器,与用户当前输 ...

  9. PHP错误 。Parse error: syntax error, unexpected T_INLINE_HTML, expecting T_ENDSWITCH or T_CASE or T_DEFAULT

    If you wan't to use the alternative syntax for switch statements this won't work: <div> <?p ...

  10. 【ipad神坑】ipad麦克风听不到声音怎么回事 微信QQ语音视频对方都听不到

    今天遇到了这个问题 说话听不见,但是敲击ipad,可以明显的听到击打的声音 siri也是可以听到 上网上找,大多都是说恢复设置,重启,隐私麦克风权限等解决方案 都是浪费感情 全部尝试过了,依然没有用. ...