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

【问题标题】：How to border image to a specific height & width to an image ? HTML / CSS如何将图像边框设置为图像的特定高度和宽度？ HTML / CSS
【发布时间】：2021-02-01 23:12:01
【问题描述】：

我在下面附上了一张图片，我想为它编写 CSS 来为图片提供从左到下的边框。我试过了，但我的代码是全边框

这是我想要的输出。

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

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

【问题讨论】：

标签： html css image border

【解决方案1】：

如果您只希望图像的两侧有边框，我建议您使用 box-shadow。

【讨论】：

【解决方案2】：

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

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

&lt;img src="https://picsum.photos/id/10/200/150" &gt;

【讨论】：

非常感谢兄弟。我可以获取您所指的 css 链接教程吗？对我有很大帮助