对border-image的理解
2017-10-25 本文已影响0人
jia林
border-image CSS3的新增属性，今天动手测试了一下，挺好玩的，以后做复杂边框就可以不用图片了！
pic.jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-image</title>
</head>
<body>
<style type="text/css">
.border_img{
margin:20px auto 0px;
width: 300px;
height: 300px;
border:10px solid #ccc;
}
.border_img1{
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 20 round;
}
</style>
</body>
<div class="border_img border_img1"></div>
</html>
pic1.jpg
.border_img{
margin:20px auto 0px;
width: 300px;
height: 300px;
border:10px solid #ccc;
}
.border_img2{
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 10 repeat;
}
<div class="border_img border_img2"></div>
pic2.jpg
.border_img{
margin:20px auto 0px;
width: 300px;
height: 300px;
border:10px solid #ccc;
}
.border_img3{
border: 2px solid #ccc;
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 10 stretch;
}
<div class="border_img border_img3"></div>
pic3.jpg
