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

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

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

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-image 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
}
</style>
</head>
<body>

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

<p>Dùng để kẻ đường viền của phần tử HTML bằng hình ảnh, thường hình ảnh có các biểu tượng hình học nằm trong một khung hình, thuộc tính border-image phải kết hợp với thuộc tính border giá trị transparent (ví dụ border: 10px solid transparent), để tạo border nền trước:</p>

<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 30 round;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30 round;</div>

<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 50 round;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 50 round;</div>

<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 20% round;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 20% round;</div>

<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 30% round;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30% round;</div>

<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 30 stretch;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30 stretch;</div>

<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 20% stretch;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 20% stretch;</div>

<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 30% stretch;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30% stretch;</div>

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

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

</body>
</html>
Code Thuộc tính border-image trong CSS nằm trong bài viết Thuộc tính border-image trong CSS