css border-image
Fundamental
Divide the given picture into Jiugongge, place the four corners of the Jiugongge on the four corners of the element,
and then place the top, bottom, left , and right parts on the four sides of the element , and then stretch or tile according to the parameters
Example
Sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bd{
width: 310px;
height: 310px;
border: 29px solid;
margin: 300px;
/*
25%: 边框图片宽度为图片的25%
stretch: 表示将四个边的边框背景图片拉伸
*/
border-image: url("./img-border-3.png") 25% stretch;
}
</style>
</head>
<body>
<div class="bd">这里有一个不错的边框</div>
</body>
</html>
Example effect
analysis
Example extension
Modify border width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bd{
width: 310px;
height: 310px;
border: 29px solid;
margin: 300px;
/*
50%: 边框图片宽度为图片的50%
stretch: 表示将四个边的边框背景图片拉伸
上下宽度已经占了图片的100%，所以四个边的边框部分为空白
*/
border-image: url("./img-border-3.png") 50% stretch;
}
</style>
</head>
<body>
<div class="bd">这里有一个不错的边框</div>
</body>
</html>
Modify to tile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bd{
width: 310px;
height: 310px;
border: 29px solid;
margin: 300px;
/*
25%: 边框图片宽度为图片的25%
space: 表示将四个边的边框图片平铺，不足的空间平均分布为空隙
*/
border-image: url("./img-border-3.png") 25% space;
}
</style>
</head>
<body>
<div class="bd">这里有一个不错的边框</div>
</body>
</html>
