如何将图像边框设置为图像的特定高度和宽度？ 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

如果您只想在图片的两侧添加边框，我建议您使用 box-shadow。

Answer 2

保持边框透明并应用特定大小的渐变：

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" >

如何将图像边框设置为图像的特定高度和宽度？ HTML / CSS

How to border image to a specific height & width to an image ? HTML / CSS

html

css

image

border