Html 如何淡入颜色并设置标题的左边距'；带有CSS的文本框

我在这里所做的只是制作一个如下图所示的盒子，但是如何淡出颜色和设置

左边距=10px；页边空白顶部：5px

用于带有CSS的标题框

---

HTML:

<div id="_div">
    <span class="_top">Company Performance</span>
    <span class="_content">Electric Consumption: 2300kW</span>
<div>

#_div {
    display: block;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    width: 300px;
    height: 100px;
    background-color: #FFFFFF;
    box-shadow: 5px 5px 5px #e0e6e8;
    border: 1px solid #c1dee0;
}
._top {
    display: block;
    background-color: #D0E3EC;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c1dee0;
}
._content {
    display: block;
    margin-left: 10px;
    margin-top: 10px;
}

._top {
    display: block;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c1dee0;
    background-image:
    linear-gradient(#D0E3EC, #e9f2f6);
    padding-left: 10px;
    padding-top: 5px;
}

---

为了解决我的问题，我使用了

线性梯度（#D0E3EC，#e9f2f6）和
左填充：10px；垫面：5px。要了解更多详细信息，请查看下面的代码

代码：

<div id="_div">
    <span class="_top">Company Performance</span>
    <span class="_content">Electric Consumption: 2300kW</span>
<div>

#_div {
    display: block;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    width: 300px;
    height: 100px;
    background-color: #FFFFFF;
    box-shadow: 5px 5px 5px #e0e6e8;
    border: 1px solid #c1dee0;
}
._top {
    display: block;
    background-color: #D0E3EC;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c1dee0;
}
._content {
    display: block;
    margin-left: 10px;
    margin-top: 10px;
}

._top {
    display: block;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c1dee0;
    background-image:
    linear-gradient(#D0E3EC, #e9f2f6);
    padding-left: 10px;
    padding-top: 5px;
}

不清楚为什么要使用边距
如果要对齐文本，请使用带_topclass的填充

删除顶级中的所有填充并添加

padding: 5px 0 5px 10px;

要使颜色褪色，请使用不透明度：.5
您要往右转多远？你到底想去哪里解决这个问题？我要强调的是如何解决我的第一个问题，这是关于褪色的。