需要在一側有半寬邊框，在另一側有全寬邊框

Question

這是我的 html 和 css 代碼：

 .image-box{ max-width: 300px; position: relative; }.image-box img{ max-width: 100%; width: 100%; object-fit: cover; border: 8px solid #000000; border-right: 0; border-bottom: 0; /* border-image: linear-gradient(to right, #000 68%, transparent 32%) 100% 1; */ }

 <div class="image-box"> <figure> <img src="https://via.placeholder.com/300" alt=""> </figure> </div>

在運行它時，我收到了這個。

但是，我想要這樣的東西：

如果我取消注釋這一行

border-image: linear-gradient(to right, #000 68%, transparent 32%) 100% 1; 

然后它在頂部顯示半寬邊框，但這也會使左邊框消失並像這樣顯示。

Answer 1

您可以使用偽類做這樣的事情，使頂部的邊框像您希望的那樣實現：

它所做的是隱藏頂部的一半邊框。

 .box { width: 150px; height: 150px; background-color: black; border-top: 5px solid red; border-left: 5px solid red; position: relative; }.box:after { content: ""; width: 50%; height: 5px; background-color: white; position: absolute; right: 0; top: -5px; }

 <div class="box"></div>

Answer 2

免責聲明：並非詳盡清單。 嘗試提出另一種解決方案！

帶有background-image: linear-gradient()

為了使線性漸變看起來像邊框，我們可以向圖像添加填充並向漸變添加硬色標：

 .image-box { --thickness: 8px; }.image-box img { padding-top: var(--thickness); padding-left: var(--thickness); background-image: linear-gradient(to right, black 60%, white 60%); } figure{margin:0;line-height:0}

 <div class="image-box"> <figure> <img src="https://via.placeholder.com/300"> </figure> </div>

這樣做的一個潛在問題是邊界的只有一側可能更短。

使用偽元素

偽元素可用於展示樣式。 您可以在 CSS 中通過雙冒號輕松識別它們（例如::before 、 ::marker ）。

旁注：雖然由於遺留原因仍受支持，但它們也可以用單冒號書寫（例如:before ）。 幫自己一個忙，使用雙冒號。

我們可以使用偽元素來創建邊框。

我將使用自定義屬性使代碼更易於更改。
就個人而言，我最喜歡放置在后面的方法，因為這樣在極端（縮放）情況下不會發生父母背景的滲漏。

作品

左邊用::before合成邊框，頂邊用::after合成邊框。 由於這些是獨立的元素，我們可以單獨定義它們的寬度和高度：

 .image-box::before, .image-box::after { content: ""; position: absolute; top: 0; left: 0; background-color: black; }.image-box::before { /* Left */ width: var(--thickness); height: 100%; }.image-box::after { /* Top */ width: 60%; height: var(--thickness); }.image-box { --thickness: 8px; position: relative; /* Leave space for border */ padding-top: var(--thickness); padding-left: var(--thickness); max-width: 300px; box-sizing: border-box; }.image-box img {max-width:100%} figure{margin:0;line-height:0}

 <div class="image-box"> <figure> <img src="https://via.placeholder.com/300"> </figure> </div>

放在后面

將圖像放在偽元素之上，使其看起來像（部分寬的）邊框：

 .image-box::before, .image-box>figure { grid-area: 1/1 / 1/1; /* Place both on first grid-cell */ }.image-box::before { content: ""; width: 60%; height: 100%; background-color: black; }.image-box { --thickness: 8px; max-width: 300px; display: grid; }.image-box img { /* Leave space for border */ padding-top: var(--thickness); padding-left: var(--thickness); width: 100%; box-sizing: border-box; } figure{margin:0;line-height:0}

 <div class="image-box"> <figure> <img src="https://via.placeholder.com/300"> </figure> </div>

使用clip-path: polygon()

在polygon()中指定“左上角”形狀的每個點：

 .image-box { position: relative; padding-top: 8px; padding-left: 8px; max-width:300px; }.image-box::before { --thickness: 8px; content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; clip-path: polygon( 0 0, 100% 0, 100% var(--thickness), var(--thickness) var(--thickness), var(--thickness) 100%, 0 100%); background-color: black; } figure {margin:0;line-height:0}

 <div class="image-box"> <figure> <img src="https://via.placeholder.com/300"> </figure> </div>

為什么不使用border ？

編輯：顯然border-image是一回事。 看一個例子。 因此底部部分已經過時。

不幸的是，邊框的每一邊只能是一種顏色。 這意味着僅使用border屬性無法實現黑白頂部邊框。

一個解決方案是重繪我們不想要的部分邊界：

 #example { padding: 1rem; background-color: slateblue; }.image-box { --thickness: 8px; position: relative; border: 0 solid black; border-top-width: var(--thickness); border-left-width: var(--thickness); max-width: 300px; }.image-box::after { content: ""; position: absolute; top: calc(-1 * var(--thickness)); right: 0; /* 100% - <length> + <thickness left-side> */ width: calc(100% - 60% + var(--thickness)); height: var(--thickness); background-color: white; } body { display: flex; flex-direction: column; gap: 1rem; } figure{margin:0;line-height:0}

 <div class="image-box"> <figure> <img src="https://via.placeholder.com/300"> </figure> </div> <div id="example"> <div class="image-box"> <figure> <img src="https://via.placeholder.com/300"> </figure> </div> </div>

但是正如你所看到的，這樣我們將失去父級的背景。 僅當父母的背景是純色時，硬編碼某些顏色才有效。 如果父母的背景是圖像，這將不起作用。

此外，必須告訴.image-box要繪制的顏色是多余的信息（因為背景已經存在）並且只會給開發人員帶來更多的精神負擔。

Answer 3

您幾乎可以使用邊框圖像。 您需要正確定義切片。

 .image-box { max-width: 300px; position: relative; }.image-box img { max-width: 100%; width: 100%; object-fit: cover; border: 8px solid #000000; border-right: 0; border-bottom: 0; border-image: linear-gradient(to right, #000 68%, transparent 32%) 1; }

 <div class="image-box"> <figure> <img src="https://via.placeholder.com/300" alt=""> </figure> </div>