带边框的 CSS 问题

Question

网站的新手和整个编码的新手，但也想学习。

基本上，我想做的基本上是让灰色框所在的边框变成灰色，其余部分变成蓝色。我试过用谷歌搜索它，但很难找到能准确描述我正在寻找的东西。

灰色区域宽 200 像素，从页面左侧开始大约 26 像素。

有人能帮忙吗？提前致谢

Border Image

header 代码在这里 - 灰色框是 Logo 图像的一部分。

 <div class="fusion-header" style="height: 91px; overflow: visible;">
        <div class="fusion-row">

    <div class="fusion-logo" data-margin-top="5px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px">

Answer 1

您可以通过使用具有边框大小的负底边距来覆盖 Logo 元素中的父边框。

.header {
  background: #515151;
  border: 5px solid #5EDBE7;
}

.logo {
  width: 200px;
  height: 50px;
  margin: 50px auto;
  background: #5D5D5D;
  
  /* Override the container vorder */
  border-bottom: 5px solid #999;
  margin-bottom: -5px;
}

<div class="header">
  <div class="logo"></div>
</div>