CSS - 边框只有边框的一半可见 [英] CSS - Border where only half of a border is visible

问题描述

我很困惑，因为必须使其在CSS中工作才能拥有一个div，边框只能在一半的宽度上可见。

I am confused as to have to make it work in CSS only to have a div where the border would be only visible on half it's width.

边框样式是一个简单的 1px solid＃000;

The border style is a simple 1px solid #000;

但是，我想要的 div 的边框不可见（100％在 div 的宽度），
而不是第一个50％的 div 的宽度。

However, I want the top of the div's border to not be visible everywhere (on 100% on the div's width), rather only on the first 50% of the div's width.

我无法得到这个例子，它需要百分比，所以通常的技巧（下半部分的图像...）。

I haven't been able to get an example of this anywhere, and it needs to be in percentages, so the usual bag of tricks (image over the second half,...).

推荐答案

p>这将工作：

#holder {
        border: 1px solid #000;
        height: 200px;
        width: 200px;
        position:relative;
        margin:10px;
} 
#mask {
        position: absolute;
        top:-1px;
        left:1px;
        width:50%;
        height: 1px;
        background-color:#fff;
}

<div id="holder">
        <div id="mask"></div>
</div>

    

这篇关于CSS - 边框只有边框的一半可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！