CSS3 边框(Border)功能之border-image

YYDataV软件开发

已于 2022-05-06 15:19:12 修改

阅读量733

点赞数

分类专栏：【知识篇 - 积跬步行千里】文章标签： CSS3 border-image 图像边框 linear-gradient stretch

于 2022-04-27 18:50:43 首次发布

本文链接：https://blog.csdn.net/lildkdkdkjf/article/details/124454360

版权

【知识篇 - 积跬步行千里】专栏收录该内容

22 篇文章 23 订阅

订阅专栏

border-image 用于将图像添加到边框。语法：

border-image: source slice width outset repeat|initial|inherit;
border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 规定图像边框的向内偏移。
border-image-width 规定图像边框的宽度。
border-image-outset 规定边框图像超过边框盒的量。
border-image-repeat 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

添加CSS3边框图像

<html>

<head>
     <title>可视化大屏</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
          #round {
               border: 10px solid transparent;
               margin: 300;
               width: 600px;
               height: 500px;
               background-image: linear-gradient(rgba(33, 204, 251, 0.3), rgba(33, 204, 251, 0.9), rgba(33, 204, 251, 0.3));
               border-image: url(img/45.png) 8 stretch;
               /* border-image-slice: 40 15 15 15; */
               /* border-image-repeat: stretch; */
          }
     </style>
</head>

<body>
     <div id="round">在这里，图片铺满整个边框。</div>
</body>


</html>

边框图片：

最终效果：

YYDataV软件开发

关注

0
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	规定图像边框的向内偏移。
border-image-width	规定图像边框的宽度。
border-image-outset	规定边框图像超过边框盒的量。
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。