如何实现边框图片

最新推荐文章于 2024-11-14 17:40:35 发布

任彬0311

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量161

点赞数

分类专栏：笔记文章标签： css html css3

本文链接：https://blog.csdn.net/zibo736246/article/details/127739380

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS的border-image属性来实现边框使用图片的效果，通过html和css代码展示具体实现，特别提到了border-image-slice属性用于设置图片切割距离。

摘要由CSDN通过智能技术生成

border-image属性

值	说明
border-image-source	边框图片的路径
border-image-slice	图片边框向内偏移 num / % / fill
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像是否应该平铺(repeat)、铺满(round)或拉伸(stretch)。

html代码如下:

<div class="a"></div>

css 代码

.a{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            /* 1 边框图片必须有边框*/
            border: 1px solid transparent;
            /* 2 边框图片资源*/
            border-image-source: url(./img/border.png);
            /* 3  图片四次切割距离*/
            border-image-slice: 53 62 40 132;
            /* 4  一一对应*/
            border-image-width: 53px 62px 40px 132px;
            /* 5  去除四个角的边框 的样式*/
            border-image-repeat: repeat;
        }