有时候页面上面有些小卡片的显示样式，如果用背景图来实现的话，有点麻烦，还得切图，如果想调整卡片的尺寸，有时候也得重新切图，限制比较多，下面介绍一种可以实现不错的效果，还不用背景图，只用css样式就可以了，代码如下。

html代码如下

<div class="panel_box bg1">
	<p>商品总量</p>
	<p class="num">2</p>
	<p>当前上架商品总量</p>
</div>

<div class="panel_box bg2">
	<p>用户总量</p>
	<p class="num">2</p>
	<p>当前用户总量</p>
</div>

页面样式如下：

<style type="text/css">
*{
	padding: 0;
	margin: 0;
}
.panel_box {
	margin: 50px 100px;
	padding: 20px 10px;
	width: 200px;
	height: auto;
	border-radius: 5px;
	font-size: 14px;
	line-height: 1.6;
}
.num {
	font-size: 18px;
}
.bg1{
	background:linear-gradient(-125deg,#57bdbf,#2f9de2);
}
.bg2{
	background:linear-gradient(-125deg,#ff7d7d,#fb2c95)
}
</style>

实际显示效果如下，还可以吧。