如何將圖像邊框設置為圖像的特定高度和寬度？ HTML/CSS

Question

我在下面附有一張圖片，我想為其編寫 css，以便從左側和底部為圖片提供邊框。 我試過了，但我的代碼正在全邊框

這是我想要的必需輸出。

 img{ border-top: 15px solid #faa633; border-right: 15px solid #faa633; border-left: 15px solid #faa633; }

 <img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="height: 400px;width: 300px">

Answer 1

保持邊框透明並應用特定大小的漸變：

 img { border: 15px solid transparent; background: linear-gradient(#faa633, #faa633) bottom left/ /* position */ 50% 40% /* width height */ border-box no-repeat; }

 <img src="https://picsum.photos/id/10/200/150" >

Answer 2

如果您只希望圖像的兩側有邊框，我建議使用 box-shadow。