html - 如何使用 CSS 为标题框淡化颜色和设置边距

Question

我在这里所做的只是制作一个如下图所示的盒子，但如何淡化颜色并设置 margin-left= 10px; margin-top: 5px 用于带有 CSS 的标题框

---

Demo

HTML:

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

CSS:

#_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;
}

Answer 1

不清楚为什么要使用边距如果你想对齐文本使用填充与 _top 类

从 _top 类中删除所有填充并添加

padding: 5px 0 5px 10px;

要淡化颜色，请使用 opacity: .5