Question

出于某种原因，即使我使用相同的颜色作为外部的boder和内部的boder，内部的边框也不显示。任何人都可以帮我展示内部和外部的边界吗？

PS：我尝试改变颜色，但没有用。

<div id="card">

  <div style="display: table; height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);">
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div>
    <div style="display: table-row; padding: 20px;">Body</div>
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Footer</div>
  </div>
</div>

的jsfiddle： https://jsfiddle.net/24qLhtto/1/

Answer 1

＆＃13;

<div id="card">

  <div style="display: table; border-collapse: collapse;  height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);">
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div>
    <div style="display: table-row; padding: 20px;">Body</div>
    <div style="display: table-row;z-index:10; height: 24px; padding: 12px 20px; border: 1px solid red; background-color: rgb(247, 247, 249);">Footer</div>
  </div>
</div>

＆＃13;

你走了：

https://jsfiddle.net/24qLhtto/2/

您需要做的就是添加： border-collapse: collapse; 到你的父div。如果您display: table;必须特别注意桌子上的边框，就会发生这种情况。

希望这有帮助！

Answer 2

试试这个

<div id="card">

  <div style="display: table; height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);border-collapse: collapse">
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div>
    <div style="display: table-row; padding: 20px;">Body</div>
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Footer</div>
  </div>
</div>

将border-collapse: collapse添加到display: table

DEMO

Answer 3

我改变了我看待这个问题的方式，因为我遇到了以下问题： - 不要使用display:table和display: row。如果这样做，边框将无法正确显示，除非您还使用border-collapse: collapse，在这种情况下，border-radius将不起作用。我改为使用display:flex。

https://codepen.io/dumitrudan608/pen/eEdPVG

边界没有显示像div结构的卡片

3 个答案: