【问题标题】: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;
}
<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">

【问题讨论】:

    标签: 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;
      }
      <img src="https://picsum.photos/id/10/200/150" >

      【讨论】:

      • 非常感谢兄弟。我可以获取您所指的 css 链接教程吗?对我有很大帮助
      猜你喜欢
      • 2012-03-01
      • 2014-06-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-04-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多