CSS3为边框应用图片border-image


   作者蓝石榴    由lan16转载自蓝石榴    更新于2016-09-15 14:45    已被浏览316次

1.使用方法:
  border-image顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。例如:
  background:url(/images/articles/35/20160915124958.png) 10px 20px no-repeat;
  但是又比背景图片复杂一些。
  想象一下:一个矩形,有四个边框。如果应用了边框图片,图片该怎么分布呢? 图片会自动被切割分成四等分。用于四个边框。可以理解为它是一个切片工具,会自动把用做边框的图片切割。怎么切割呢?为了方便理解,做了一张特殊的图片,由9个矩形(70*70像素)拼成的一张图(210*210像素),并标注好序号,是不是像传说中的九宫图,如下:
  
  我们把上图当作边框图片 来应用一下, 看一看是什么效果,根据border-image的语法:
  

2.代码示例:
  #border-image{
    background:#F4FFFA;
    width:210px;
    height:210px;
    border:70px solid #ddd;
    border-image:url(/images/articles/35/20160915124958.png) 70 repeat
  }
  效果如下:
  从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8 被重复。5在哪?因为是从四周向中心切割图片的所以,5显示不出来。而在chrome浏览器中5是存在的。

豫ICP备13022176号-2   鄂公网安备 42010602000416号   Copyright © 2013 - 2020 蓝石榴. All Rights Reserved  联系我 联系我 蓝石榴技术社区