html5学习-CSS3-border-image属性

论坛 期权论坛 脚本     
匿名技术用户   2020-12-30 04:09   366   0
在CSS3中 border-image属性是规定包围div元素的边框,有空再解释下div元素
大致呢,我可以这样字设置:

1 div
2 {
3 -webkit-border-image:url(border.png) round;
4 -o-border-image:url(border.png) round;
5 border-image:url(border.png) round;
6 }

这个代码是W3cshool上的,我用chrome浏览器,那么他的引擎就是webkit的,所以第一行代码是正确的,假如是Opera那么第二行,如果是Firefox就应该是 -moz-border-image,我暂时没有尝试,好久没用过火狐了。
url()还是来选取图片,round是border-repeat的参数,可选的还一个stretch,效果图明天我再传,没时间写了,晚安

说一下它都有什么元素:

border-image 属性是一个简写属性,用于设置以下属性:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

在这里假如不设定会用默认值:

none 100% 1 0 stretch

border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

copy from http://www.w3school.com.cn/cssref/pr_border-image.asp

然后呢,具体要慢慢尝试才知道效果,我还在尝试中,等到全都明白了再贴效果图。


分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP