css - 每边的CSS边框高度不同

Question

我想知道在纯CSS中是否可以使用这样的边框？这个盒子里不会有任何内容，只有未来的图像。

我想在没有 jQuery 的纯 CSS 中实现这一点。我环顾四周，似乎这不太可能，但是随着 CSS 的不断发展，我想知道除了使用嵌套 div 等之外是否有可能。

干杯!

Answer 1

如果您使用伪元素，则只需一个 div 即可。jsFiddle在这里

HTML：

<div id="wrapper">
     <img src="http://www.placekitten.com/200/100" />
</div>

CSS：

#wrapper {
    position:relative;
    width: 200px;
    height:100px;
    background: #faa;
    border-left: 1px solid #f00;
    border-bottom: 1px solid #f00;
}
#wrapper::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: -1px;
    right: -1px;
    border-right: 1px solid #f00;
    border-bottom: 1px solid #f00;
}

Answer 2

你可以伪造它。就像这个jsFiddle 示例一样。

HTML

<div id="wrapper">
    <div id="top"></div>
    <div id="bottom"></div>
    <img src="http://www.placekitten.com/200/100" />
</div>

CSS

#top, #bottom {
    width: 200px;
    height:50px;
    position:absolute;
    left:-1px;
}
#bottom {
    border-left: 1px solid #f00;
    border-right: 1px solid #f00;
    border-bottom: 1px solid #f00;
    bottom:0;
}
#top {
    border-left: 1px solid #f00;
    top:0;
}
#wrapper {
    position:relative;
    width: 200px;
    height:100px;
    background: #faa;
}

Answer 3

只是为了“考虑”它，您也可以在 div 的右下方粘贴一个小图形（作为背景图像）并在左侧和底部使用边框。仍然只是通过 css 用一个小图形操作它，但至少高度和宽度是动态的，不会像使用完整图像一样卡住。

还将避免大量额外的标记和 css。1 个 div，1 个 css 声明和 1 个小图像。