如何在 css 中將頂部欄移到左側？

Question

我有一個顯示頂部紅色條的 div。 我一直在嘗試將此欄移到左側並使其看起來像左側邊框，但沒有任何運氣。 有誰知道如何使用這段代碼讓它看起來像一個邊框？ 提前致謝！

 .container { position: relative; width: 100%; padding: 18px; margin-bottom: 16px; border-radius: 8px; border: solid 2px #e1e4e8; overflow: hidden; }.container::after { content: ''; position: absolute; display: block; height: 6px; width: 100%; top: 0; left: 0; background-color: red; }

 <div class = "container">this is a text</div>

Answer 1

本例調整了::after的position，使紅色邊框出現在左邊，希望能接近想要的結果。

 .container { position: relative; width: 100%; padding: 18px; margin-bottom: 16px; border-radius: 8px; border: solid 2px #e1e4e8; overflow: hidden; }.container::after { content: ''; position: absolute; display: block; width: 6px; inset: 0; background-color: red; }

 <div class = "container">this is a text</div>

Answer 2

你可以設置border-left: 6px solid red; 在容器 class 上並刪除background-color: red; 來自.container::after

此外，如果您想保留灰色邊框，只需將該樣式應用到容器的每一側，如下所示：

  border-top: 2px solid #e1e4e8;
  border-bottom: 2px solid #e1e4e8;
  border-right: 2px solid #e1e4e8;

請看下面的片段：

 .container { position: absolute; display: block; width: 100%; padding: 18px; margin-bottom: 16px; border-radius: 8px; border-left: 6px solid red; border-top: 2px solid #e1e4e8; border-bottom: 2px solid #e1e4e8; border-right: 2px solid #e1e4e8; overflow: hidden; }.container::after { content: ''; position: absolute; display: block; height: 6px; width: 100%; top: 0; left: 0; }

 <div class = "container">this is a text</div>

Answer 3

也許只是將其簡化為邊框？

 .container { position: relative; width: 100%; padding: 18px; margin-bottom: 16px; border-radius: 8px; border: solid 2px #e1e4e8; border-left: solid 8px red; overflow: hidden; }

 <div class = "container">this is a text</div>

Answer 4

您還可以使用混合邊框樣式，並在頂部、底部和右側使用隱藏。 W3Schools描述了用法