CSS3 边框(Border)功能之border

阅读：评论：0

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>

边框图片：

最终效果：

本文发布于:2024-01-30 16:50:36，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170660464021454.html

上一篇：DIV+CSS 圆角边框

下一篇：Java Swing组件的几种边框集中设计

标签：边框功能 border Border

留言与评论（共有 0 条评论）

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