我的html结构是这样的
<div class="module-box carilion-proud-logo-section">
<div class="left-section">
<svg>Carilion Proud Logo svg</svg>
</div>
<div class="right-section">
<a href="">Visit the hub</a>
</div>
</div>
我的CSS结构是这样的
.carilion-proud-logo-section {
margin: 0 30px 30px 30px !important;
display: flex;
justify-content: space-between;
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
border-radius: 5px;
.left-section {
text-align: center;
width: 100%;
padding: 39px 0;
background: url("../../../../../../assets/images/carilion-proud-blue.png")
no-repeat center;
background-size: cover;
clip-path: ellipse(100% 150% at 0% 50%);
border-radius: 5px;
}
.right-section {
// padding: 39px 0;
width: 100%;
text-align: center;
align-self: center;
}
}
唯一的问题是图像不应该有边框,其余的 div 元素应该有边框
最简单的可能是使用插入阴影: 这是一个例子:
div {
box-shadow: inset 0 0 0 3px gray;
/* makeup for demo */
display: flex;
width: 500px;
border-radius: 1em;
overflow: hidden;
margin: 2em auto;
}
button {
margin: auto;
}
<div><img src="https://picsum.photos/id/16/250/100"> <button>button</button></div>
阴影绘制边框,但隐藏在图像后面。