Java教程

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

本文主要是介绍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 的几个示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!