。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <style> .imgBox{ width:300px; height:300px; /* 虽然使用图片边框 但是border属性必须的有 虽然会被覆盖 */ border:30px solid transparent; /* border-image-source: none;//图片边框的初始值 border-image-slice:100%; border-image- 1; border-image-outset: 0; border-image-repeat: stretch; */ /* 用在边框的图片的路径。 */ border-image-source: url("./images/1.jpg"); /* 图片边框向内偏移。 */ /*将图片边框 平铺到div元素*/ border-image-slice:30 fill; /* 图片边框的宽度。 */ border-image-width: 1; /* 边框图像区域超出边框的量。 */ border-image-outset: 0; /* 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)*/ border-image-repeat: stretch; /* 简写形式 */ /* border-image: image-source image-height image-width image-repeat */ /* border-image: url("./images/1.jpg") 30 30 fill; */ } </style> </head> <body> <div class="imgBox"> </div> </body> </html>
。