Code Thuộc tính border-image-repeat trong CSS

Trình soạn thảo - Code Thuộc tính border-image-repeat trong CSS

Kết quả - Code Thuộc tính border-image-repeat trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-image-repeat trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

div {width:100%; float:left; height:auto;  border: 10px solid transparent;
  padding: 15px; margin-bottom:15px; border-image-slice: 30;border-image-source: url('https://webmoi.vn/thumuc/border-hinh.png');
}
</style>
</head>
<body>

<h1>Code Thuộc tính border-image-repeat trong CSS</h1>

<p>Dùng để quy định cách chia các ô, khoảng trống, cách sắp xếp của hình ảnh dùng làm đường viền trên phần tử HTML:</p>

<div style="border-image-repeat: stretch;">border-image-repeat: stretch; (Hình ảnh được kéo dài để lấp đầy khu vực)</div>

<div style="border-image-repeat: repeat;">border-image-repeat: repeat; (Hình ảnh được xếp chồng lên nhau để lấp đầy khu vực, thậm chí có thể chia các ô ra)</div>

<div style="border-image-repeat: round;">border-image-repeat: round; (Hình ảnh được xếp chồng lên nhau để lấp đầy khu vực, không chia các ô nhưng điều chỉnh kích thước)</div>

<div style="border-image-repeat: space;">border-image-repeat: space; (Hình ảnh được xếp chồng lên nhau để lấp đầy khu vực, thậm chí bổ sung thêm khoảng trống xung quanh các ô để lấp đầy)</div>

<p><b>Hình gốc:</b></p>

<p><img src="https://webmoi.vn/thumuc/border-hinh.png"></p>

</body>
</html>