border-image边框背景不变形九宫格

最新推荐文章于 2024-11-01 16:49:13 发布

码林鼠

最新推荐文章于 2024-11-01 16:49:13 发布

阅读量417

点赞数

分类专栏： css 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_41254345/article/details/128724547

版权

css 专栏收录该内容

26 篇文章

订阅专栏

<div className="test_div"></div>

 width: 400px;
    height: 400px;
    border: 1px solid transparent;//注意这里要有至少1px的边框
    border-image-source: url(~@assets/images/mall/modal_bg.png);
    border-image-width: 38px;
    border-image-slice: 76;
    border-image-outset: 1;//这个通过调大值自行实验总结
    border-image-repeat: repeat;// top center ,left center, bottom center ,right center 是否重复还是拉伸

注意上面76和38的关系，二倍的关系，因为用的是二倍图
在这里插入图片描述
在ps中取到76px
最终效果如下：