web 点九切图九宫格切图 border-image 的几个示例

2022/4/8 6:21:10

编程Tag： web image https 九宫格 width repeat 示例 border box

本文主要是介绍web 点九切图九宫格切图 border-image 的几个示例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

说明:

原理是利用 border-image 对图片的切割四刀（上右下左），形成九宫格。做这种功能，首先需要找出特殊的不变的地方，然后再找出重复的地方。不变的地方通常是头尾（要么是左右，要么是上下），重复的地方必定是中间内容区域（fill）。

示例1：

<style>
    .app {
        width: max-content; /* fit-content */
        min-width: 331px;
        height: 92px;
        padding: 0 80px 0 50px;
        box-sizing: border-box;

        border-image-source: url('https://lee-1255983702.cos.ap-guangzhou.myqcloud.com/16493477783361.png');

        /* 思路1：传统九宫格，上下左右都切，就是中心区域无限延伸 */
        /* border-image-slice: 29 154 20 154 fill; */
        /* border-image-width: 29px 154px 20px 154px; */

        /* 思路2：只切左右，不切上下 */
        border-image-slice: 0 154 0 154 fill;
        border-image-width: 0 154px 0 154px;
        border-image-repeat: repeat;
    }

    .content {
        /* 为了使用 max-content/fix-content 内容区域最好不要使用绝对定位失去块特征、失去宽度 */
        position: relative;
        text-align: center;
        top: 40px;
    }
</style>

<body>
    <div class="app">
        <div class="content">Lorem ipsum dolor sit amet</div>
    </div>
</body>

示例2：

<style>
    .app {
        width: 456px;
        min-height: 320px;
        box-sizing: border-box;

        border-image-source: url('https://lee-1255983702.cos.ap-guangzhou.myqcloud.com/1649347819653bcard.png');

        /* 只切上下两个区域 */
        border-image-slice: 40 0 40 0 fill;
        border-image-width: 40px 0 40px 0px;
        border-image-repeat: repeat;
    }
</style>

<body>
    <div class="app"></div>
</body>

示例3：

<style>
    .app {
        width: 456px;
        min-height: 393px;
        box-sizing: border-box;

        border-image-source: url('https://lee-1255983702.cos.ap-guangzhou.myqcloud.com/1649347861622rcard.png');

        /* 只切上下两个区域 */
        border-image-slice: 40 0 40 0 fill;
        border-image-width: 40px 0 40px 0;
        border-image-repeat: repeat;
    }
</style>

<body>
    <div class="app"></div>
</body>

参考资料：

https://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/
https://blog.csdn.net/huhaha24/article/details/81059484
https://zhuanlan.zhihu.com/p/29472601
https://www.jianshu.com/p/fee55621cd3b

这篇关于web 点九切图九宫格切图 border-image 的几个示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

web 点九切图 九宫格切图 border-image 的几个示例

说明:

示例1：

示例2：

示例3：

参考资料：

相关编程文章

web 点九切图九宫格切图 border-image 的几个示例