仓酷云

标题: 今天来学习css3 border-image利用申明 [打印本页]

作者: 不帅 时间: 2015-1-16 10:31
标题: 今天来学习css3 border-image利用申明
现在我们不再使用之前所学的“table”定位技术，而是采用Div+css的方式实现各种定位。

在看这个属性时，仿佛国际的文章都没给人人说太分明，明天就一同说说
起首来一个素材图片whiteButton.png

然后我们要做成如许的效果：

代码（呵呵！请不要急，持续向下看）：

-moz-border-image:url(images/whiteButton.png)012012roundstretch;
border-image:url(images/whiteButton.png)012012stretchstretch;
display:block;
width:600px;
border-width:012px;
padding:10px;
text-align:center;
font-size:16px;
text-decoration:inherit;

<divstyle="-webkit-border-image:url(images/whiteButton.png)012012stretchstretch;-moz-border-image:url(images/whiteButton.png)012012roundstretch;border-image:url(images/whiteButton.png)012012stretchstretch;display:block;width:600px;border-width:012px;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}

none：默许值。无背景图。<image>：利用相对或绝对url地点指定背景图象。
<number>：
边框宽度用流动像素值暗示。<percentage>：边框宽度用百分比暗示。[stretch|repeat|round]：拉伸|反复|平展(个中stretch是默许值。)
请看下图平分析一下css代码

也就是：
他们把图片，用#的体例截取，然后用stretch|repeat|round来把持程度或垂直的效果。看看下图你就分明了

固然关于边框的宽度你也能够用%;其道理也是一样：

到这人人应当弄分明border-image是怎样一回事了吧。

参考文档：www.lrbabe.com/sdoms/borderImage/
ejohn.org/blog/border-image-in-firefox/

外补丁margin呢，它代表了DIV(盒子)和DIV(盒子)之间的距离，而内补丁padding则是大盒子(DIV)和里面的盒子(DIV)的距离(盒子(DIV)里面可以放盒子(DIV)哦)。

作者: 飘飘悠悠 时间: 2015-1-18 06:47
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 第二个灵魂 时间: 2015-1-22 07:00
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 分手快乐 时间: 2015-1-30 23:43
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 愤怒的大鸟 时间: 2015-2-6 17:14
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 飘灵儿 时间: 2015-2-17 17:10
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 活着的死人 时间: 2015-3-5 21:35
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 灵魂腐蚀 时间: 2015-3-12 15:48
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 乐观 时间: 2015-3-19 23:43
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

欢迎光临仓酷云 (http://ckuyun.com/)