css3入门

CSS3 HTML5实例二(图形化边界)

字号+ 作者: 来源: 2014-11-16 21:49 我要评论( )

顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下: border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; b

  

  顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:

  border: 5px solid #cccccc;

  -webkit-border-image: url(/images/border-image.png) 5 repeat;

  -moz-border-image: url(/images/border-image.png) 5 repeat;

  border-image: url(/images/border-image.png) 5 repeat;

  这里,border: 5px 设定了边界的宽度,然后,每个边界的图片定义告诉浏览器,使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置:

  border-bottom-rightright-image

  border-bottom-image

  border-bottom-left-image

  border-left-image

  border-top-left-image

  border-top-image

  border-top-rightright-image

  border-right-image

  支持的浏览器: Firefox 3.1, Safari , Chrome.

(责任编辑:admin)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS3 HTML5实例四(使用 RGBA 实现透明效果)

    CSS3 HTML5实例四(使用 RGBA 实现透明效果)

    2015-06-14 09:09

  • CSS3系列教程:边框半径和圆角

    CSS3系列教程:边框半径和圆角

    2015-06-14 09:13

  • CSS3系列教程:边框颜色

    CSS3系列教程:边框颜色

    2015-06-14 09:13

  • CSS3系列教程:阴影

    CSS3系列教程:阴影

    2015-06-14 09:13

网友点评
t