案例：
图片资源：
参考代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{
margin:0 ;
padding: 0;
}
.wai{
margin:50px auto;
width: 700px;
height: 350px;
border:1px solid;
border-image:url("../1.jpg") 20%/40px;
padding: 40px 20px;
background-image: linear-gradient(90deg,#3d7ea5 50%,#ce4b4b 50%);
box-shadow: #999 5px 5px 4px 4px;
}
.nei{
width: 100%;
height: 100%;
background:url("../zuqiu.png") no-repeat center;
opacity: 0.5;
}
</style>
<body>
<div class="wai">
<div class="nei">
</div>
</div>
</body>
</html>
