热线电话 0472-6868359
首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

border-image-source属性(CSS设置)

发布时间:2021-07-01 18:30 所属分类:热门主题 浏览次数:
  border-image-source属性(CSS设置)
  一、border-image的兼容性
  border-image能够说是CSS3中的一员大将,将来一定会大放光荣,其运用潜力真的是十分的惊人。惋惜现在支撑的浏览器有限,仅Firefox3.5,chrome浏览器,Safari3+支撑border-image。所以,就本文而言,IE浏览器能够回家歇息了,Firefox3及其以下以及Opera浏览器也能够歇息去看《阿凡达》了。所以,本文供给的一些demo页面,要在Firefox3.5+,chrome或Safari3+浏览器下才能够看到作用。
  CSS3中文手册上border-image兼容性缩略图
  更新于2016-06-14
  现在IE11+,FireFox以及Chrome浏览器均已支撑border-image,并且现在也就Android4.3及其以下版本需求-webkit-私有前缀,能够说border-image的年代行将到来。
  //zxx:没想到这一晃一等便是6年!
  二、了解border-image的一些特性
  咱们或许关于CSS2中的background特色比较了解,例如:background:url(xx.jpg)27pxno-repeat;
  指代的是图片(url(xx.jpg)),方位(27px),重复性(no-repeat)。
  border-image于此相似,border-image包括图片,取舍方位(与background方位相同,也是数值,也支撑百分值),重复性。例如:border-image:url(border.png)27repeat;,指的便是图片(url(border.png)),取舍方位(27),重复办法(repeat)。试着对比background,这有助于border-image特色的回忆。
  详细描述border-image的参数
  border-image的参数便是上面说到的三个:图片,取舍方位,重复性。
CSS
  1、图片(border-image-source)
  与CSS2中background-image特色相同,border-image的布景图运用url()调用,图片能够是相对路径或是绝对路径,也能够不运用图片,即border-image:none;
  2、图片取舍方位(border-image-slice)
  此参数特色比较鲜明:
  1、没有单位,专指像素。这相似于flash的as脚本,舞台高宽,影片剪辑巨细,位移直接便是一个数值,没有单位,由于默认单位便是像素(px)了。例如:border-image:url(border.png)27repeat;这儿的27专指27像素。
  2、支撑百分比值,百分比值巨细事相关于边框图片而言,假定边框图片巨细为400px*300px,则20%的实际作用便是取舍了图片的60px80px60px80px的四边巨细。
  3、取舍特性。假如您对CSS中clip特色(clip:rect(auto,auto,auto,auto))比较了解,则这儿了解就会轻松些。clip能够说是CSS中一个明火执仗的取舍特色,而此处的特色虽然表意上不是取舍,可是在border-image作用的完成上来说,就好像是个取舍工具,把边框图片四分五裂,再从头安顿,变形。其有1~4个参数,其方位规矩符合CSS遍及的方位规矩(与margin,padding等或border-width共同),上右下左顺时针,再赋予取舍的意义,举个简略的例子,前面说到,支撑百分比宽度,所以这儿“30%35%40%30%的”暗示能够用下图表明:
  取舍暗示
  看图说话便是,离图片上部30%的当地取舍一下,在右边35%的当地取舍一下,在离底部40%的当地裁剪一下,在距左面30%的当地也取舍一下。于是总共对图片进行了“四刀切”,构成了九个分离的区域,这便是九宫格,这是下面深化讲解border-image的根底。
  3、重复性(border-image-repeat)
  这儿的重复性有别于background的布景重复,差别较大。background图片便是重复,不重复,水平重复,笔直重复,总归便是围绕repeat(重复)这个词打转,一家独大。而关于border-image,可谓是三足鼎立,repeat(重复)仅仅其中之一,其他两个是round(平铺)和stretch(拉伸)。其中,stretch是默认值。
  参数0~2个,0则运用默认值–stretch,例如:border-image:url(border.png)30%40%;就等同于border-image:url(border.png)30%40%stretchstretch;;1则表明水平方向及笔直方向均运用此参数;2个参数的话则第一个参数表水平方向,第二个参数表明笔直方向。例如:border-image:url(border.png)30%40%;就等同于border-image:url(border.png)30%40%roundrepeat;表明水平方向round(平铺),笔直方向repeat(重复),至于何为平铺何为重复下面会深化讲解。
  三、深化了解border-image的宽度和展现办法
  分开了解border-image的宽度或是展现办法其实不太难的,关键是这两者结合运用时分的意义,需求花一定的功夫的了解。
  协助了解的九宫格模型
  何为九宫格?为什么咱们需求九宫格协助了解?
  简略的数字九宫格
  “九宫格”是我国书法史上临帖写仿的一种界格,又叫“九方格”,即在纸上画出若干大方框,再于每个方框内分出九个小方格,以便对照法帖范字的笔画部位进行练字。在本文,“九宫格”就专指由九个方格构成的矩形布局,例如左图便是一个很简略的数字九宫格。
  border-image的数值参数其实是用来取舍边框图片的,正好“哗哗四刀”切出了个九宫格的模型,所以,有意或无意,巧合仍是必定,咱们需求用到九宫格模型协助咱们了解border-image的制造原理。下面这张图是本文十分重要的基本的暗示图,由于这是张具有代表性的九宫格图案(27*3)*(27*3)。
  九宫格代表图gif演示<————————>九宫格代表图gif演示
  这张图能够协助咱们更好的了解border-image的取舍及制造的原理。
  边框将border-image分成了九部分:border-top-image,border-right-image,border-bottom-image,border-left-image,border-top-left-image,border-top-right-image,border-bottom-left-image,border-bottom-right-image以及中心的内容区域。假定现在边框的宽度是27像素,则上面所说的九部分正如下图所表明的(扩大400%):
  边框分割与九宫格
  左图中,橙红色的四个边角的菱形区域称为“角边框图片”,在border-image中,角边框图片是没有任何展现作用的,不会平铺,不会重复,也不会拉伸,有点相似于视觉中盲点的意思。
  而对边的四个橙黄色区域属于展现作用的作用区(也是边框宽度核算剩余区),上下区域即border-top-image和border-bottom-image区域受到展现作用特色的第一个参数——水平方向作用影响:假如为repeat,则此区域图片会水平重复,假如是round,则此框框内的图片会水平平铺,假如是stretch,则此矩形域中的图片就会被水平拉伸。(下部分的实例会做详细演示)左右区域只有笔直方向上的作用,与上下区域作用对应,不多说。
  中心的区域(左图的空白格)受到全部参数的作用,在水平和笔直两个维度上都有展现作用(平铺、拉伸等)。
  这儿,插一点内容,讲一下round(平铺),repeat(重复),stretch(拉伸)所详细指代的作用。这三个特性其实大家应该都比较了解。看下图:
  桌面布景图的显现办法
  在windows体系桌面壁纸显现办法选项中就有“拉伸”和“平铺”,这两个作用与border中“拉伸”和“平铺”作用共同。仅仅或许在了解“平铺”和“重复”的区别上有点丈二的和尚——摸不着头脑。记住这么一点:平铺或许会改动了原图片显现的巨细,重复不改动图片显现的巨细。
  这么比如吧,您从万科地产买了个99.5m*99.5m的毛坯房,地上要贴瓷砖,都是1m*1m的正方形瓷砖。假如是“平铺”,对不住,这1m边长的瓷砖不可,要处理!怎样处理法?很简略,每个瓷砖压成0.995m*0.995m的,这样就能够了,所以,平铺便是以完好的单元铺满整个区域。假如是重复,就直接把这1m*1m的瓷砖从一个旮旯一个一个的放置,放到头放不下了怎样办?直接把瓷砖从中心“咔”掉,于是最终会在房子的边角看到许多半截的瓷砖。下面便是一个个的实例演示了,您能够经过下面的实例作用中加深了解。
  协助了解的一些实例
  下面的实例代码对应的demo页面要在Firefox3.5、chrome或Safari3+浏览器下才能够看到作用。所运用的布景图片便是前面说到的九宫格代表图(8菱形–81px*81px),名称为border.png。
  1、27像素取舍宽高(1/3边框图片宽高)在1em边框宽度下的默认显现
  CSS代码:
  .border_image{
  width:400px;
  height:100px;
  border:1emdoubleorange;
  border-image:url(../image/border.png)27;
  }
  成果:
  border-image默认显现
  您能够狠狠地点击这儿:实例demo1
  作用剖析:
  这儿没有显现办法的参数,正如上面所说的,0参数即运用默认的stretch拉伸,所以从图上能够看到四个对边的拉伸作用。上面还说到,四个对角是不受重复办法影响,该什么姿态仍是什么姿态,无拉伸平铺,本面目示人。见下图的标示(扩大200%)。
  拉伸的标示
  这个九宫格各区域展现办法的标示图在border-image中是通用的,不管border-image的代码怎么改动,其显现作用的原理中心便是左面这张九宫标示图,亘古不变的是四个边角,这四个边角便是四条边框的重叠区域,不会有拉伸或是重复的展现作用。有改动的便是四边区域和中心区域,这几个区域中的水平和笔直特色也是稳如泰山,耸峙不变的,改动的就仅仅“拉伸”罢了,变成重复啦或是平铺。
  由于其通用性,所以此显现原理标示图在下面就不逐个展现了,您找到对应的方位,修正“拉伸”为“平铺”或“重复”即可,其他都不用改动。
  2、27像素取舍在1em边框宽度下round(平铺)显现作用
  CSS代码:
  .border_image{
  width:400px;
  height:100px;
  border:1emdoubleorange;
  border-image:url(../image/border.png)27round;
  }
  成果:
  round作用图
  您能够狠狠地点击这儿:实例demo2
  3、27像素取舍在1em边框宽度下repeat(重复)作用
  CSS代码:
  .border_image{
  width:400px;
  height:100px;
  border:1emdoubleorange;
  border-image:url(../image/border.png)27repeat;
  }
  成果:
  repeat作用图
  您能够狠狠地点击这儿:实例demo3
  上图我圈了四个边角,不难发现,这一个边角处的菱形都是被截掉的。这便是repeat的作用,还记得上面的毛坯房的例子吗?round会紧缩(或伸展)图片巨细使其正好在区域内显现,而repeat是不管三七二十一直接重复的,并且是居中重复,repeat从中心开端(这是我的调查,或许不精确)。
  这儿还有一点需求留意:在webkit中心的浏览器下这个round特色和repeat特色好像没有没有区分,显现的作用是相同的,所以您在chrome浏览器或是Safari浏览器下看demo2和demo3的作用或许是相同的。Firefox3.5下能够精确区分这两个参数。
  4、上实例款式缩写
  上面的实例还能够进一步缩写。CSS如下:
  .border_image{
  width:400px;
  height:100px;
  border:doubleorange;
  border-image:url(../image/border.png)27/1emrepeat;
  }
  完成的作用是相同的。您能够狠狠地点击这儿:实例demo4
  border-image制造原理简述
  我是这样了解的:共存在两个九宫格,一个是边框图片,还有一个便是边框自身,九个方位联系逐个对应。边框自身的特性让其变成了一个九宫格,四条边框交织,加上其围住的区域,正好构成一个九宫格。边框图片则是经过图片取舍完成了九宫格。这是了解制造原理的根底。
  1、调用边框图片
  border-image的url特色,经过相对或绝对路径链接图片。
  2、边框图片的取舍
  border-image的数值参数取舍边框图片,构成九宫格。
  3、取舍图片填充边框
  边框图片被切割成9部分,以逐个对应的联系放到div边框的九宫格中,然后再紧缩(或拉伸)至边框(border-width或border-image-width)的宽度巨细。
  4、履行重复特色
  被填充至边框九宫格四个旮旯的的边框图片是不履行重复特色的。上下的九宫格履行水平方向的重复特色(拉伸或平铺),左右的格子履行笔直方向的重复特色,而中心的那个格子则水平重复和笔直方向的重复都要履行。
  5、完结制造,完成作用
  制造原理动画暗示,本flash动画以第一个demo作用做示例,请点击其中的“下一步”按钮,可看到一步一步的演示(假如flash无法显现,请点击这儿直接观看):
  四、border-image的一些运用
  自适应的圆角作用
  运用图片如下:
  圆角资料图片
  此图片的取舍宽度为20像素,基本上便是此图的圆角巨细。div的边框宽度为10像素,其CSS中心款式如下:
  .border_image{
  border-image:url(../image/border.png)20/10px;
  }
  成果如下:
  圆角作用
  您能够狠狠地点击这儿:圆角作用demo
  多边框作用
  运用图片如下:
  多边框作用资料
  圆角和边框巨细都是20,就不上CSS代码了,迥然不同。终作用如下图:
  多边框作用图
  您能够狠狠地点击这儿:多边框作用demo
  投影作用
  运用资料图片如下:投影作用图片资料
  取舍宽度和边框宽度都是2562,这儿的投影我直接运用photoshop的投影款式生成的,发现用在边框投影上有一点点缺乏,需求手动调整,截取投影的四边,以及重复区域再拼合一下,您能够自己试试假如完成最佳的投影作用。
  作用如下图:
  相片的投影作用
  您能够狠狠地点击这儿:投影作用demo
  选项卡
  自适应选项卡,CSS2中完成自适应选项卡需求将布景图片制造的较长,并且需求两层标签,可是在CSS3中,图片要短,且一个标签就能够搞定。例如,这是淘宝新主页查找选项卡的布景图片(已取舍),,要是运用border-image,只要值么点图就能够了,完成选项卡作用需求的图片
  边框图片取舍巨细和边框宽度都是550;底边为0,其他都是5像素,成果作用为:
  选项卡完成的作用
  您能够狠狠地点击这儿:选项卡demo
  其他
  还有许多其他的运用,曾经咱们制造渐变布景,一张布景图很少能够重复运用,而有了border-image后就不会有这样的问题了,由于其能够拉伸。咱们还能够使用border-image做高光按钮,做自适应的popup对话框,等等,太多了,就不逐个举例了。
  五、border-image作用的jQuery插件
  正如开端所讲的,border-image仅Firefox3.5,chrome,Safari支撑,IE这类浏览器不支撑,可是并不代表他们无法完成相似的作用。例如使用canvas绘图,能够让Firefox2完成相似作用,IE下的VML语言也是支撑矢量绘图,而这些便是此jQuery插件完成相似border-image作用的原理或称之为中心。
  您能够狠狠地点击这儿:jquery.borderImage.js(插件js)
  运用办法
  首先需求调用jQuery库,然后便是上面供给的js文件了。办法为borderImage,如下面的示例代码:
  $('#element').borderImage('url("border.png")30%35%40%30%');
  对此插件我个人点评不高,原因如下:
  一是IE6及以上也能够完成相似canvas作用(需js插件支撑),没有必要修正头部什么再运用VML绘图;
  二是兼容性欠佳,IE6下无法完成高宽大于100像素的边框的拉伸;IE8下貌似也有点问题。
  IE6下插件显现的糟糕作用
  因此,我不详细说,一带而过。
  您能够狠狠地点击这儿:border-image作用jQuery插件demo
  六、总结
  从本文的篇幅能够看到border-image的潜力真是很惊人,我能够感觉到这将会是CSS3中的重磅武器之一。本文大部分的精力是在讲解border-image的原理,由于我十分看好border-image的运用远景,所以尽或许详尽的讲清楚border-image各个特色的意义,让即使初学者也能较好的了解border-image的意义,本文列举的几个运用能够说仅仅border-image最基本的些运用。假如加上些创意的思考和天马行空的幻想,真不知border-image能够创造出什么美妙的工作来。
  我开端深化学习CSS3方面的东西也仅仅最近开端,这东西,非要投入进入,你才会感受到这玩意真是酷,太难以想象了。我现在能够幻想假如CSS3的国际到来,那时分,网页将会是多么精彩的一个国际。好了,就说这些,共同进步吧。
作品标签: CSS 属性

评论列表(共254人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    ttom-注册会员
    2021-07-01 5:1:48

    7、诗情画意壹零壹。 8、参加完101画室的油画课,才发现原来油画这么易学。 9、想画画,朋友圈; 六、文章里面也能够参加弹幕啦!

    回复
用户头像图片
    理过的图注册会员
    2021-07-01 2:56:20

    期。在随后的年代,感恩节的日期改变了多次,直到在1957年1月31日,加拿大议会宣告每年十月的第二个星期一为感恩节。 除了美国border-image-source属性 1、写给谁看:写给谁看是咱们在设计宣。。。

      用户头像图片
        这清风晚霞注册会员
        2021-07-01 10:52:42

        @理过的图:border-image-sour脸才是国际上最诱人的风景,妈妈您的美丽在孩儿心中永存,祝母亲节高兴! 4、慈母手中线,游子身上衣,临行密密逢,意恐迟迟归;每逢~~~

    回复
用户头像图片
    由解放日报报游客
    2021-07-01 19:53:7

    游客42605:border-image-soit you 煎熬是变美味的方法,加油也是如此 Its a way to make it delicious, and s草。 鹅不食草有什么功效

    回复
用户头像图片
    个大时代注册会员
    2021-07-01 12:37:37

    也能够歇息去看《阿凡达》了。所以,本文供给的一些demo页面,要在Firefox3.5+,chrom2日,你栽树了吗?栽树造林是绿化祖国的百年大计。有青山,水才会秀丽。种树栽树,才会有绿色家乡。祝你栽树节心想事成!

    回复