CSS3的边框(三)

border-image有以下几个重要的属性需要了解一下:

round 会自动调整尺寸,完整显示边框图片

repeat 单纯平铺多余部分,会被“裁切”而不显示。

div

{

border:15px solid transparent;

width:300px;

padding:10px 20px;

}

#round

{

-moz-border-image:url(/i/border.png) 30 30 round;/* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 round;/* Opera */

border-image:url(/i/border.png) 30 30 round;

}

#stretch

{

-moz-border-image:url(/i/border.png) 30 30 stretch;/* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 stretch;/* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 stretch;/* Opera */

border-image:url(/i/border.png) 30 30 stretch;

}

在这里,图片铺满整个

边框

在这里,图片被拉伸以填充该区域。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,195评论 0 11
  • 总览 边框border-color 属性boder-image 属性border-radius 属性box-sha...
    DecadeHeart阅读 1,029评论 0 9
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,327评论 0 11
  • Chapter 01 Snowflake 赵志伟第一次闻到了吕鋆峰信息素的味道。 这得益于北京在元旦这天下的这场雪...
    千张包阅读 1,057评论 0 6
  • 我今天想分享两个故事,想通过故事让大家来与我讨论,怎样的服务可以让你愉悦消费?参于讨论者有惊喜哟… 故事1:源于公...
    骅姑娘阅读 453评论 4 0