css - 边框顶部样式(线性渐变)

Question

我有一张图片，我在上面添加了 20 像素的上边框。 我想以显示线性渐变的方式为顶部边框着色。 我尝试过不同的方法，但都没有成功。

你们能帮帮我吗？这是代码(html 和 css):

<div class="logo"><img src="images/tiger.jpg"></div>

.logo img {width:100%;top-border:20px solid;}

Answer 1

请试试这个。我制作了边框以在 before 类中使用。

.logo{position:relative;width:200px;}
img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
.logo:before{
  /* IE10+ */ 
  background-image: -ms-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);

  /* Opera */ 
  background-image: -o-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffb76b), color-stop(51, #FF7C00), color-stop(100, #ff7f04));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);

  /* W3C Markup */ 
  background-image: linear-gradient(to right, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
  position:absolute;
  content:"";
  left:0;
  right:0;
  width:100%;
  height:20px;
  top:0;
}

<div class="logo"><img src="https://dummyimage.com/200x200/000/fff&text=sample+image" alt=""></div>