BootstapStudy/BlazorStudy.BootstrapLatest/wwwroot/plugs/InfoBox/css/box.css

/* 信息框样式 */

/* #region 实现方式一 */
/* 实现方式一：外层无边框等设置，框形由 "内上的左、上、右边框"、"内中的左与右边框"及 "内下的左、右、下边框" 组成 */
.info-box {
    --info-box-main-color:#6f42c1;
    --info-box-text-color:#ffffff;
    --info-box-body-bgcolor:#afa1c9;
    --info-box-footer-bgcolor:#a78adc;

    margin: 10px;
    padding: 0;

    font-size: 16px;
    font-weight: bold;
    color: var(--info-box-text-color);
}

.info-box .info-box-item {
    box-sizing: border-box;
    padding: 10px;
}

.info-box .info-box-header {
    height: 50px;
    line-height: 28px;
    background-color: var(--info-box-main-color);

    border-top: 2px solid var(--info-box-main-color);
    border-left: 2px solid var(--info-box-main-color);
    border-right: 2px solid var(--info-box-main-color);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.info-box .info-box-body {
    min-height: 200px;;
    background-color: var(--info-box-body-bgcolor);

    border-left: 2px solid var(--info-box-main-color);
    border-right: 2px solid var(--info-box-main-color);
}

.info-box .info-box-footer {
    height: 40px;
    line-height: 18px;
    
    background-color: var(--info-box-footer-bgcolor);
    border-bottom: 2px solid var(--info-box-main-color);
    border-left: 2px solid var(--info-box-main-color);
    border-right: 2px solid var(--info-box-main-color);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* #endregion */

/* #region 实现方式二 */
/* 实现方式二：框形由 外层边框形成，内上、内中、内下配合各相应角的形状 */
.msg {
    --msg-text-color:#ffffff;
    --msg-main-color: green;
    --msg-body-bgcolor:rgba(154, 176, 154, 0.726);
    --msg-footer-bgcolor: rgb(98, 145, 98);

    margin: 10px;
    padding: 0;

    /* 外层必须背景颜色且与连框颜色相同，否则四角稍内会有月牙形"漏洞" */
    background-color: var(--msg-main-color);

    border: 2px solid var(--msg-main-color);
    border-radius: 10px;
}

.msg .msg-item {
    color: var(--msg-text-color);
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.msg .msg-header {
    height: 50px;
    line-height: 48px;
    background-color: var(--msg-main-color);

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    border-bottom: 2px solid var(--msg-main-color);
}

.msg .msg-body {
    height: 200px;
    background-color: var(--msg-body-bgcolor);

    padding: 10px;
}

.msg .msg-footer {
    height: 39px;
    line-height: 38px;

    background-color: var(--msg-footer-bgcolor);

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* #endregion */

/* #region 默认信息框 */
/* 默认信息框：基于"实现方式二" */
.default-info {
    --default-info-text-color:#000000;
    --default-info-main-color: rgb(206, 212, 218);
    --default-info-body-bgcolor:rgb(248, 249, 250);
    --default-info-footer-bgcolor: rgb(233, 236, 239);

    margin: 10px;
    padding: 0;
    /* 外层必须背景颜色且与连框颜色相同，否则四角稍内会有月牙形"漏洞" */
    background-color: var(--default-info-main-color);

    border: 2px solid var(--default-info-main-color);
    border-radius: 10px;
}

.default-info-item {
    color: var(--default-info-text-color);
    font-weight: bold;

    padding-left: 10px;
    padding-right: 10px;

    box-sizing: border-box;
}

.default-info-header {
    height: 50px;
    line-height: 50px;
    background-color: var(--default-info-main-color);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 2px solid var(--default-info-main-color);
}

.default-info-body {
    min-height: 200px;
    background-color: var(--default-info-body-bgcolor);

    padding: 10px;
}

.default-info-footer {
    height: 40px;
    line-height: 38px;
    background-color: var(--default-info-footer-bgcolor);

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    /* border-bottom: 2px solid (206, 212, 218); */
}
/* #endregion*/