详解css样式中的border-image
发布时间:2017-01-06 15:55:45 作者:天恒之光 我要评论
本文主要介绍了css样式中border-image的用法,具有一定的参考价值,下面跟着小编一起来看下吧
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
border-image-source 属性设置边框的图片的路径[none | <image>]
border-image-slice 属性图片边框向内偏移[ <number> | <percentage> ](1,4) ?fill
1 2 3 4 5 | div { border : 20px solid #000 ; border-image-source: url (border.png); border-image-slice: 27 , 27 , 27 , 27 ; } |
border-image-width 属性设置图片边框的宽度[ <length>|<number> |<percentage> | auto](1,4)
1 2 3 4 5 6 | div { border : 20px solid #000 ; border-image-source: url (border.png); border-image-slice: 27 , 27 , 27 , 27 ; border-image- width : 27px 1 10% 27px ; } |
border-image-outset 属性设置边框图像区域超出边框的量[ <length>|<number> ](1,4)
1 2 3 4 5 6 7 | div { border : 20px solid #000 ; border-image-source: url (border.png); border-image-slice: 27 , 27 , 27 , 27 ; border-image- width : 27px 1 10% 27px ; border-image-outset: 27px 27px 27px 27px ; } |
border-image-repeat 属性设置图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)(1,2)
1 2 3 4 5 6 7 8 9 | div { border : 20px solid #000 ; border-image-source: url (border.png); border-image-slice: 27 , 27 , 27 , 27 ; border-image- width : 27px 1 10% 27px ; border-image-outset: 27px 27px 27px 27px ; border-image-repeat: rounded; border-image: url (border.png) 27 rounded; } |
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
- css3中新增了一个属性 border-image ,这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。本文给大家介绍css3 border-image边2015-11-24
- 这篇文章主要介绍了详解CSS3中border-image的使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下2015-07-18
CSS3 border-image详解、应用及jQuery插件
border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅Firefox3.5,chrome浏览器,Safari3+支持border-i2011-08-29深入浅出CSS3 background-clip,background-origin和border-image教程
最近在准备一个下学期参加比赛的概念网站,希望能用到CSS3的新特性,比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档2011-01-27- css3_快速弄明白border-image2010-06-23
最新评论