注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

css3——属性(一):边框2 (颜色、图片)  

2014-08-05 12:17:36|  分类: css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

三、边框颜色(border-color):

css2中一个边的边框只可以上一种色,css3可以上多个色。

目前只有Mozilla的firefox3.0+支持。所以其写法是:

-moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/
-moz-border-right-colors:<color> <color> <color>*; /*右边边框*/
-moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/
-moz-border-left-colors: <color> <color> <color>*; /*左边边框*/

:在CSS3中是“colors”因为我们是应用多色,且不能用缩写。

边框设Xpx; 边框颜色也可以设X种,少于X时用最后的颜色补。

四、边框图片(border-image):

1、语法:

border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

2、取值说明:

       none:默认值;

       <image>:设置border-image的背景图片;

     <number>:是一个数值用来设置边框宽度,单位px,可使用1~4个值,表示4个方位的值;

    <percentage>:也是用来设置边框宽度,使用百分比值;

      stretch,repeat,round: 用来设置边框图片的铺放方式,stretch是拉伸(默认),repeat是重复,round是平铺,

注:repeat和round的区别是round会压缩或者伸展border-image图片使其刚好适应border宽度,repeat直接居中重复。

3、兼容性:

ie都不支持,firefox3.5+、chrome1.0.X+、opera 11.11+、safari 3.1+可以支持。

写法:

/*Mozilla内核Firefox*/
  -moz-border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
  /*Webkit内核Safari and Chrome*/
  -webkit-border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
  /*Opera*/
  -oborder-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
  /*W3C标准*/
  border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>

 

border-image-source:是背景图片;

border-image-slice:用来分解的参数(1~4个值),按参数把背景图片分解成九宫格,

border-image-width:边框的宽度(1~4个值; 

border-image-repeat:图片的排列方式,(1~2个值)表示水平和垂直方向。

实例:

border-image: url("../images/border.png") 27 0 18 15 stretch  round;
  评论这张
 
阅读(28)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017