当前位置: 网站建设 > 网页设计 > 建站经验 >

css3 border-image使用说明

时间:2013-03-02 03:41来源:未知 作者:admin 点击:

标签:css3 border-image使用说明 bord(1)CSS3(90)border-image(1)使用说明(1)定义(15)
一。定义:border-image:none| image [ number | percentage]{1,4} [ / border-width{1, CSS+DIV网页重构对比TABLE显著优势 ,4} ]? [ stretch | repeat | round ]{0,2} 到这 大家应当弄清楚border-image是怎么一回事了吧。 Tag:使用解释 应用阐明 他们把图
css3 border-image使用说明》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331932013.htm

一。定义: ,CSS11个class与一个id谁的优先级高;border-image : none | <,css-sprite适用的条件 对css-sprite的理解;image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,CSS+DIV网页重构对比TABLE显著优势,4} ]? [ stretch | repeat | round ]{0,2}

到这  大家应当弄清楚border-image是怎么一回事了吧。

Tag:使用解释     应用阐明    

他们把图片,用#的方法截取,然后用 ,CSS+DIV网站优化(seo);stretch | repeat | round 来把持程度或垂直的效果。看看下图你就明白了

 

代码(呵呵!请不要急,持续向下看):

 

在看这个属性时,CSS 通过一个样式表区分IE的各个版本,似乎海内的文章都没给大家说太明确,今天就一起说说

 

<,CSS 连接后面加上 表示什么意思;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,CSS 规范书写顺序;  text-align: center;  font-size: 16px;  text-decoration: inherit;  color:white;+color:black;">在safari3+跟FF3.5,chrome5.0+,opera10.53阅读器里能看到边框背景图</div>

-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,CSS 直方图布局示例;  padding:10px;  text-align: center;  font-size: 16px; ,CSS 性能调优; text-decoration: inherit; 

请看下图平分析一下css代码

 

 

 

下面我们来讲一下基础常识:

 

 

边框宽度用固定像素值表现。 <percentage>: 边框宽度用百分比表示。 [ stretch | repeat | round ]:

 当然对于边框的宽度你也能够用%;其原理也是一样:

none: 默认值。无背景图。 <image>: 使用相对或绝对 url 地址指定背景图像。

首先来一个素材图片whiteButton.png

 ,CSS 必知的7个知识点;<number>:

 

 

拉伸 | 反复 | 平铺 (其中stretch是默认值。)

 

而后咱们要做成这样的后果:

  

--> [网站建设之]css3 border-image使用说明

 

也就是:


(责任编辑:网站建设)
css3 border-image使用说明相关文章
上一篇:CSS11个class与一个id谁的优先级高 下一篇:CSS3 Gradient 创建水晶按钮实例
回到顶部