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

 

说明:

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

示例1：上下头尾切割

譬如一般的弹窗图片：

我只需要切出头尾即可：

 

代码如下，可以通过打开 p 的注释查看效果。

<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 25 0 fill;
        border-image-width: 40px 0 25px 0px;
        border-image-repeat: stretch;
    }
</style>

<body>
    <div class="app">
        <!-- <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> -->
    </div>
</body>

 

示例 2：左右头尾切割 + 动态宽度

当然也支持宽度动态拉伸。切割图片的位置就变成「左右」了。

演示效果如图所示：

代码如下，宽度采用  max-content 能更好的搭配动态宽度。

<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');
        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>

 

示例3：上右下左全部切割

<style>
    .card {
        min-width: 466px;
        min-height: 349px;
        position: relative;
        box-sizing: border-box;

        
        /* 同时切上右下左四个区域 */
        border-image-source: url('https://lee-1255983702.cos.ap-guangzhou.myqcloud.com/1652062319356弹框.png');
        border-image-slice: 33 80 70 80 fill;
        border-image-width: 33px 80px 70px 80px;
        border-image-repeat: stretch;
    }

    .card__title { color: #fff; font-size: 18px; font-weight: bold; position: absolute; left: 62px; top: 2px; letter-spacing: 1px; }
    .card__body { padding: 48px 60px; color: #fff; font-size: 16px; }
</style>

<body>
    <div class="card">
        <div class="card__title">新增社保人员分析</div>
        <div class="card__body">
            Hello World
        </div>
    </div>
</body>

 

示例 4：基础案例

 代码示例：

<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: 30 0 30 0 fill;
        border-image-width: 30px 0 30px 0;
        border-image-repeat: stretch;
    }
</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
 
posted @ 2022-04-08 00:32  贝尔塔猫  阅读(931)  评论(0)  编辑  收藏  举报