当前位置 > it书童 > css > 正文

css 图像边框 border-image

css it书童 2019-10-05 14:11:01 0赞 0踩 170阅读 0评论

原理说明

图像边框是指使用一张图片来作为一个盒子的边框。其实就是将图片作为背景图铺上到“边框区域”上去。

但这个铺设到边框的图片,并非像常规背景图那样简单直接地铺设上去,而是有其特定的规则。

边框上铺设图片的基本原理如下图所示:

其铺设原理是:

将要作为背景的图片,分割为9个部分(如上图所示),然后4个角4个边分别铺设对应部分,中间区域就铺设背景图片的中间部分。其中4个边和中间区域,可以类似常规背景一样进行“平铺(repeat)”,或进行拉伸(缩放)。从而达到整个盒子的完美背景呈现。

主要属性

边框背景的主要属性有:

  • border-image-source: 设置作为边框背景的图片源;

  • border-image-slice: 设置要将边框背景图片进行“切割”的分割方式。形式为:border-image-slice: 数值 [fill];

注意:这里的数值不带单位!其中“数值”可以是1-4个值,分别代表上右下左4个方向的“切割厚度”。fill代表“填充”,用于中间区域填充到盒子内容区。

  • border-image-width: 设置图片边框的宽度,也可以设定1-4个值。

通常设定为auto(自动),此时就会使用border-image-slice所设定的切割厚度。

  • border-image-repeat: 设置边框背景的填充方式,可以设定1-2个值,表示横向和纵向的填充方式。

可用值如下:

stretch: 指定用拉伸方式来填充边框背景图,这是默认值,也最常用,推荐使用

repeat: 指定用重复平铺方式来填充边框背景图。类似背景图的repeat,背景图不改变大小

round: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

space: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

案例

<style>
    .box1, .box2 {
        width: 100px;
        height: 50px;
        border: 10px solid red;
        border-image-source: url("./images/bg.png");
        border-image-slice: 9 11 12 11 fill;
        border-image-width: auto;
        border-image-repeat: stretch;
    }
    .box2 {
        width: 50px;
        height: 25px;
        margin-top: 20px;
    }
</style>
<div class="box1">盒子1<br />文字</div>
<div class="box2">盒子2</div>
转载须注明出处:https://www.itshutong.com/articles/299/css-image-border-image
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录