|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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)哦)。 |
|