Question

例如，我有一个300 * 400的div，用于包含一个带有粗边框的表来创建一些视觉效果：

＆＃13;

<div style="width:200px;height:150px;background-color:black;position:relative;">
  <table style="border-top:50px solid red;border-left:50px solid yellow;border-bottom:50px solid green;border-right:50px solid blue;"></table>
</div>

＆＃13;

但现在表格边框只能有固定的边框宽度：100px，但是我希望整个表格通过边框适合div，我试过了：

＆＃13;

<div style="width:200px;height:150px;background-color:black;position:relative;">
      <table style="border-top:50% solid red;border-left:50% solid yellow;border-bottom:50% solid green;border-right:50% solid blue;"></table>
    </div>

＆＃13;

将每个边框宽度设置为50％，但它不起作用，无论如何都要这样做吗？

Answer 1

<div style="width:200px;height:150px;background-color:black;position:relative;">
  <table style="
    border-top: 75px solid red;
    border-left: 100px solid yellow;
    border-bottom: 75px solid green;
    border-right: 100px solid blue;"></table>
</div>

Answer 2

您可以使用CSS变量。在容器div中定义它们并在div的子项中使用它们。

＆＃13;

<div style="--w:200px; --h:150px; width:var(--w); height:var(--h); background-color:black; position:relative;">
  <div style="border-top:calc(var(--h) / 2) solid red; border-left:calc(var(--w) / 2) solid yellow; border-bottom:calc(var(--h) / 2) solid green; border-right:calc(var(--w) / 2) solid blue;"></div>
</div>

＆＃13;

Answer 3

Borders不支持百分比。

您只能使用固定宽度执行此操作。

<div style="width:200px;height:200px;background-color:black;position:relative;">
      <table style="border-top:100px solid red;border-left:100px solid yellow;border-bottom:100px solid green;border-right:100px solid blue;"></table>
    </div>

如果有帮助，请参阅此链接 How to set border's thickness in percentages?

无论如何让边框厚度遵循父宽度/高度？

3 个答案: