Question

我有一个fiddle，我正在尝试按照此image所示进行复制。此时，我能够在图像上放置边框，但由于某些原因，我无法增加边框左侧的高度。我很确定它会通过CSS选择器完成但不确定如何。我用来在图像上放置边框的CSS是：

.helmet-image1
{
position: relative;
left: 20px;
border-left: 2px solid rgb(254, 91, 31);
border-right: 2px solid rgb(254, 91, 31);
border-top: 2px solid rgb(254, 91, 31);
}

Answer 1

如果将图像包装在元素中，则可以在该父元素的父元素和伪元素上使用边框来伪造与父/图像高度不同的边框。

您可以使用bottom来控制身高，或者使用height替换底部并使用height: calc(100% + 100px);

之类的内容

＆＃13;

div
{ 
position: relative;
left: 20px;
border-right: 2px solid rgb(254, 91, 31);
border-top: 2px solid rgb(254, 91, 31);
display: inline-block;
}

img {
  vertical-align: top;
}

div {
  position: relative;
}


div::after{
  position: absolute;
  top: 0; left: 0; bottom: -100px;
  width: 2px;
  background: rgb(254,91,31);
  content: '';
}

＆＃13;

<div>
<img class="helmet-image1" src="https://s24.postimg.org/m3yekb9n9/i_Stock-
516143705.png">
</div>

＆＃13;

Answer 2

您可以通过在图像外放置一个容器并设置容器高度来解决此问题。

.container {
  border-left: 2px solid rgb(254, 91, 31);
  border-right: 2px solid rgb(254, 91, 31);
  border-top: 2px solid rgb(254, 91, 31);
  height: 400px;
  display: inline-block;
}
.helmet-image1
{  
  position: relative;
  left: 20px;
}

<div class="container">
    <img class="helmet-image1" 
    src="https://s24.postimg.org/m3yekb9n9/i_Stock-516143705.png">
</div>

Answer 3

你最终可以在img标签上使用box-shadow：

img {
  padding: 5px;/*optionnal */
  vertical-align: top;/*optionnal */
  box-shadow: -2px -2px rgb(254, 91, 31), 0 171px white, -2px 170px rgb(254, 91, 31), 2px -2px rgb(254, 91, 31), 2px -1px rgb(254, 91, 31), 0px -2px rgb(254, 91, 31);
  border-radius: 5px 5px 0 0/*optionnal */
}

/* demo purpose for small snippet */ 
body {min-height:400px;}

<img class="helmet-image1" src="https://s24.postimg.org/m3yekb9n9/i_Stock-
516143705.png">
<br/> text to test

https://jsfiddle.net/9b7uaoj2/15/

css中的border-left高度

3 个答案: