边框图像重复方式 | 开创者教程

实例代码

<!DOCTYPE html>

<html>
<head>
  	<title>边框图像重复方式</title>
  	<style>
        #borderimg1 { 
            border: 15px solid transparent;
            padding: 15px;
            border-image-source: url(/uploads/20250605/border.png);
            border-image-repeat: stretch;  
            border-image-slice: 30;
        }

#borderimg2 { 
            border: 15px solid transparent;
            padding: 15px;
            border-image-source: url(/uploads/20250605/border.png);
            border-image-repeat: repeat;
            border-image-slice: 30;
        }

#borderimg3 { 
            border: 15px solid transparent;
            padding: 15px;
            border-image-source: url(/uploads/20250605/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
        }

#borderimg4 { 
            border: 15px solid transparent;
            padding: 15px;
            border-image-source: url(/uploads/20250605/border.png);
            border-image-repeat: space;
            border-image-slice: 30;
        }
	</style>
</head>

<body>
    <h1>边框图像重复方式</h1>
    <p>border-image-repeat属性控制边框图像的填充方式：</p>

<h2>拉伸模式（默认）</h2>
    <p id="borderimg1">边框图像将被拉伸填充</p>

<h2>重复模式</h2>
  	<p id="borderimg2">边框图像将重复平铺，必要时会被裁剪</p>

<h2>圆角模式</h2>
  	<p id="borderimg3">边框图像将自适应缩放平铺，保持完整</p>

<h2>间距模式</h2>
  	<p id="borderimg4">边框图像将平铺，多余空间均匀分布</p>

<p>原始边框图像：</p><img src="/uploads/20250605/border.png">
</body>
</html>