美文网首页
CSS border-image

CSS border-image

作者: FrontEnder | 来源:发表于2014-12-27 12:39 被阅读0次

    为边框应用图片 border-image

    顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。例如:

    background:url(xx.jpg) 10px 20px no-repeat;

    但是又比背景图片复杂一些。

    想象一下:一个矩形,有四个边框。如果应用了边框图片,图片该怎么分布呢? 图片会自动被切割分成四等分。用于四个边框。

    可以理解为它是一个切片工具,会自动把用做边框的图片切割。怎么切割呢?为了方便理解,做了一张特殊的图片,由9个矩形(70*70像素)拼成的一张图(210*210像素),并标注好序号,是不是像传说中的九宫图,如下:

    我们把上图当作边框图片 来应用一下, 看一看是什么效果

    根据border-image的语法:

    相关文章

      网友评论

          本文标题:CSS border-image

          本文链接:https://www.haomeiwen.com/subject/iegatttx.html