如何制作边框图片

最新推荐文章于 2024-10-16 16:26:58 发布

三个粉丝

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量649

点赞数 2

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/csdn_jwdlh/article/details/123750337

版权

如何制作边框图片

在CSS3中，新增了border-image属性，这个新属性允许指定一副图像作为元素的边框。

在这里插入图片描述
上面这张图片的边框样式很好看，但是用CSS很难写出来，所以CSS3就新增了
border-image属性，专门用来写边框图片。

边框图片的切割原理

想要制作边框图片，首先要做的就是把图片进行切割。
切割图片就是把一张图片的四个角切出去，用来作为边框图片的样式。

在这里插入图片描述

切割图片遵循：上—>右—>下—>左的顺序。并且，切图的大小要能保证四个角的完整性

在这里插入图片描述

代码示例

<style>
        div {
            width: 400px;
            height: 300px;
            border: 15px solid pink;
            /* 边框图片路径 */
            border-image-source: url(../images/border.jpg);
            /* 第一种写法上右下左值不同的时候  */
            /* border-image-slice: 170 10 45 80; */
            /* 第二种写法上右下左值都相同的时候  */
            border-image-slice: 170;
            /* 图片边框的宽度（需要加单位） */
            border-image-width: 30px;
            /* 图像边框是否平铺（repeat）、铺满（round）或拉伸（stretch） */
            border-image-repeat: round;
        }
</style>
<body>
    <div></div>
</body>

效果：
在这里插入图片描述

改变平铺方式

 /* 图像边框是否平铺（repeat）、铺满（round）或拉伸（stretch） */
            border-image-repeat: stretch;

效果：
在这里插入图片描述

 /* 图像边框是否平铺（repeat）、铺满（round）或拉伸（stretch） */
             border-image-repeat: repeat;

效果：
在这里插入图片描述
大家可以根据自己的需要改变平铺方式。

三个粉丝

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫