CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式

.box{
	width:300px;
	height:360px;
	margin:60px auto;
}
.boxHeader{
	background: linear-gradient(44.24deg,#098 0%,rgba(0,170,153,.6) 100%);
    width: 100%;
	height: 80px;
	padding: 8px 16px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	color: #fff;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
	position:relative;
}
.cancel{
	width:32px;height:32px;
	font-size:20px;
	line-height:32px;
	cursor:pointer;
	text-align:center;
	color:#fff;
	position:absolute;
	top:8px;right:8px;
}
.cancel:hover{
	color:#eee;
	background:#0ba;
	border-radius:50%;
}
.content{
	width: 100%;
	height: 100%;
	background:#eee;
	box-sizing: border-box;
	border: 1px solid #bbb;
}

<div class='box'>
	<div class='boxHeader'>
		<div class='cancel' onclick='closeBox()'>&#10006</div>
		<h3>这里的背景是渐变色</h3>
	</div>
	<div class='content'>
	</div>
</div>

$=mdui.$;
function closeBox() {
	$('.box').hide();
	setTimeout(() => {
		$('.box').show();
	}, 600);

}