仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 694|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 今天来学习css3 border-image利用申明

[复制链接]
不帅 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:31:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
现在我们不再使用之前所学的“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:46 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
第二个灵魂 该用户已被删除
板凳
发表于 2015-1-22 07:00:43 来自手机 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
分手快乐 该用户已被删除
地板
发表于 2015-1-30 23:43:00 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
愤怒的大鸟 该用户已被删除
5#
发表于 2015-2-6 17:14:40 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
飘灵儿 该用户已被删除
6#
发表于 2015-2-17 17:10:08 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
活着的死人 该用户已被删除
7#
发表于 2015-3-5 21:35:41 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
灵魂腐蚀 该用户已被删除
8#
发表于 2015-3-12 15:48:07 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
乐观 该用户已被删除
9#
发表于 2015-3-19 23:43:50 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 22:57

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表