在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说
首先来一个素材图片whiteButton.png
然后我们要做成这样的效果：
代码（呵呵！请不要急，继续向下看）：
-moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch;
border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;
display: block;
width:600px;
border-width:0 12px;
padding:10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
<div style="-webkit-border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;-moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch;border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;display: block;width:600px;border-width:0 12px;padding:10px;text-align: center;font-size: 16px;text-decoration: inherit;color:white;+color:black;">在safari3+和FF3.5,chrome5.0+,opera10.53浏览器里能看到边框背景图</div>
下面我们来讲一下基本知识：
一。定义： border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}
<number>：
拉伸 | 重复 | 平铺 (其中stretch是默认值。)
请看下图平剖析一下css代码
也就是：
他们把图片，用#的方式截取，然后用 stretch | repeat | round 来控制水平或垂直的效果。看看下图你就明白了
当然关于边框的宽度你也可以用%;其原理也是一样：
到这 大家应该弄明白border-image是怎么一回事了吧。
下了dede模板不会用这个问题一直存在,总结其原因有三. 一,dede模板命名不标…
有很多朋友不知道织梦者中的dede免费模板的下载方法，在这里告诉您如何下载本站模板:…
有很多朋友在让我制作完模板后想自己安装dedecms模板,但并不是所有的朋友对dedecms模…
自定义模型 dede_addon15 {dede:sql sql=’Select b.*,a.tit…
DedeCMS从V5.3开始就支持自己扩展标签，不过许多新人很少用那个东西，简单的…
该网站属仿制模板 包含基本的首页模板 新闻列表 产品列表 内容页 单页面 以及…
织梦者-专业dedecms模板制作 织梦者现将征集大量漂亮好看的在线企业网站，我…
此方法适合5.6及5.7 其它未测 修改 include/common.func.php文件，在最后加以…
很多网友反应v57中采集规则导入失败，提示 该规则不合法…
同狗他爹经常性的间歇抽疯，织梦者在不得已的情况下更换空间了，欢迎各位网友…
我们在对dedecms进行seo优化的时候通常会要去掉dedecms默认的a/这个地址，当然在新建…
共 0 条评论
No comment yet!