border image用法-image-slice属性被废弃了么

来源：蜘蛛抓取(WebSpider) 时间：2016-09-18 09:19 标签： border image 属性
html5（29）
在CSS3中 border-image属性是规定包围div元素的边框，有空再解释下div元素
大致呢，我可以这样字设置：
3&-webkit-border-image:url(border.png)&&round;&
4&-o-border-image:url(border.png)&&round;&
5&border-image:url(border.png)&&round;
这个代码是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&
然后呢，具体要慢慢尝试才知道效果，我还在尝试中，等到全都明白了再贴效果图。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：202920次
积分：4626
积分：4626
排名：第4405名
原创：259篇
评论：58条
文章：10篇
阅读：8175
(2)(1)(15)(8)(4)(3)(2)(1)(3)(14)(4)(3)(6)(3)(4)(17)(16)(8)(10)(12)(5)(8)(1)(13)(22)(4)(79)相关内容：
border-image-slice
border-image-slice：[
]{1,4} && fill?
默认值：100%
适用于：所有元素，除table元素设置了 &'
'& 为collapse之外
继承性：无
动画性：否
计算值：指定值
用浮点数指定宽度。不允许负值。
用百分比指定宽度。参照其包含块区域进行计算。不允许负值。
保留裁减后的中间区域，其铺排方式遵循 &'
'& 的设定。
设置或检索对象的边框背景图的分割方式。
该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。
对应的脚本特性为borderImageSlice。
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
iOS Safari
Android Browser
Android Chrome
Basic Support
4.0-14.0-webkit-
3.1-5.1-webkit-
3.2-5.1-webkit-
2.1-4.3-webkit-
3.5-14.0-moz-
15.0-webkit-> CSS3 border-image-slice 属性
CSS3 border-image-slice 属性
属性定义及使用说明
border-image -slice属性指定图像的边界向内偏移。
JavaScript 语法:
object.style.borderImageSlice="50% 50%"
border-image-slice:&number|%|
注意:&此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。
数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）
百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度
保留图像的中间部分
CSS3&border-image-slice&属性
指定图像的边界向内偏移：
border-image-source: url(border.png);
border-image-slice: 50% 50%;
浏览器支持
任何浏览器都不支持border-im-slice 属性。
可以使用属性取代它。
文章来源：壹虹通SEO学习=> 《》
本文地址：
除非注明，文章均由 《》 原创，欢迎转载！转载请注明本文地址，谢谢。
人浏览， 获得评论
CSS 属性-最近文章
壹网销全网营销系统是一款专业的企业级网络营销系统，致力于向中小企业提供一站式的网络营销解决方案。产品包含了建站、seo、群发到WAP网站等服务并实现了数据互通。壹网销成立于2010年，现已有超过数十万个用户享受使用我们提供的技术支持和服务，帮助中国数千家网络基础应用服务商建立起技术和服务体系。
咨询请联系：
业务客服：
技术客服：
(8)(2)(4)(8)(9)(2)(0)(0)(0)(36)(1)(0)(3)(3)(0)(5)(5)(0)(2)(1)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(0)(6)(3)(28)(3)(4)(11)(3)(3)(9)(7)(5)(6)(7)(1)(9)(2)(4)(2)(1)(0)(8)(118)(16)(20)(0)(40)(22)(33)(6)(51)(12)(3)(102)(0)(5)

我要回帖

更多关于 border image 属性 的文章

 

随机推荐