码迷,mamicode.com
首页 > 其他好文 > 详细

1.border-image

时间:2016-05-21 17:39:48      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

1.设置在元素围绕的border的图片,用图片代替边框

语法:
broder-image-source:图片
border-image-slice:切下的区域,数字|百分比(相对于图像的高度和宽度)
border-image-width:在round情况下设置repeat图片的宽度
border-image-repeat:stretch|round|repeat|space
border-image-outset:
border-image有三个要求

  1.使用在border上,元素上必须有border属性
  2.切下图片像素slice
  3.定义中间的区域是重复拉伸还是直接拉伸

简写:
border-image:url("source") 30 round;
简写只能写图片地址,slice区域,和repeat方式,border-image-width须单独写,否则无法显示

JavaScript syntax:   object.style.borderImageSlice="30%"

浏览器支持

技术分享 

原图片

技术分享

1.stretch拉伸,slice是30,根据单个小方块来计算

 技术分享

2.round重复小方块平铺,slice是30,根据单个小方块来计算

 技术分享

3.repeat重复平铺,slice是30,根据单个小方块来计算

 技术分享

4.slice值是百分比,相对于图像的高度和宽度

技术分享

技术分享

技术分享

5.border-image-width:在round情况下设置repeat图片的宽度

 技术分享

 

1.border-image

标签:

原文地址:http://www.cnblogs.com/alantao/p/5514938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!