blocks|key|685194|text|这样行得通吗：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|685195|​|685196|#holder+{
++++++++border:+1px+solid+#000;
++++++++height:+200px;
++++++++width:+200px;
++++++++position:relative;
++++++++margin:10px;
}+
#mask+{
++++++++position:+absolute;
++++++++top:-1px;
++++++++left:1px;
++++++++width:50%25;
++++++++height:+1px;
++++++++background-color:#fff;
}|code-block|syntax|javascript|685197|<div+id="holder">
++++++++<div+id="mask"></div>
</div>|685198|685199|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Would this work:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="holder"&gt;
        &lt;div id="mask"&gt;&lt;/div&gt;
&lt;/div&gt;

    </code></pre>
</div>
</div>
</p>


blocks|key|685260|text|让我们来看看我是如何编辑leo的代码，把左边的半个边框放在中间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|685261|试试这个：|685262|html代码|685263|<div+class="half-a-border-on-left">Hello+world!</div>|offset|length|style|CODE|685264|css代码|685265|+++<style>
.half-a-border-on-left+{
++border-left:+1px+solid+black;
++position:+relative;
++height:+50px;
++background:+red;
}
.half-a-border-on-left:after+{
++padding:0;
++margin:0;
++content:+"";
++width:+1px;
++height:+10px;
++background-color:white;
++position:+absolute;
++left:-1px;
++top:+-10px;
}
.half-a-border-on-left:before+{
++padding:0;
++margin:0;
++content:+"";
++width:+1px;
++height:+10px;
++background-color:white;
++position:+absolute;
++left:+-1px;
++bottom:+-5px;
}
</style>|code-block|syntax|javascript|685266|这是我用来放半边框的代码谢谢你利奥|685267|entityMap^0|0|0|0|0|1H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@$H|10|I|11|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|13|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>let show you how i edit the code of leo, to put a half border at left in center.</p>

<p>try this:</p>

<p>html code</p>

<p><code>&lt;div class="half-a-border-on-left"&gt;Hello world!&lt;/div&gt;</code></p>

<p>css code</p>

<pre><code>   &lt;style&gt;
.half-a-border-on-left {
  border-left: 1px solid black;
  position: relative;
  height: 50px;
  background: red;
}
.half-a-border-on-left:after {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left:-1px;
  top: -10px;
}
.half-a-border-on-left:before {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left: -1px;
  bottom: -5px;
}
&lt;/style&gt;
</code></pre>

<p>Those are code i use to put a half border  thank you leo,</p>


blocks|key|469305|text|您可以使用CSS渐变边框|type|unstyled|depth|inlineStyleRanges|entityRanges|data|469306|​|469307|📷|atomic|offset|length|469308|469309|469310|.half-a-border-on-top+{
++border-top:+1px+solid;
++border-image:+linear-gradient(to+right,+#000+50%25,+#FFF+50%25)+100%25+1;
}|code-block|syntax|javascript|469311|<span+class="half-a-border-on-top">Hello+world!</span>|469312|469313|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/f88fc47714b45a6212ede539886c6976.png|imageAlt^0|0|0|0|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@$G|14|H|15|1|16]]|A|$]]|$1|I|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|19|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|M|7|1A|8|@]|9|@]|A|$N|O]]|$1|R|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

<p>You can use CSS gradient border</p>
<p><a href="https://i.stack.imgur.com/H8qVE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H8qVE.png" alt="half of border" /></a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.half-a-border-on-top {
  border-top: 1px solid;
  border-image: linear-gradient(to right, #000 50%, #FFF 50%) 100% 1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="half-a-border-on-top"&gt;Hello world!&lt;/span&gt;

    </code></pre>
</div>
</div>
</p>


<p>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.</p>

<p>The border style is a simple <code>1px solid #000;</code></p>

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

<p>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>


CSS - Border where only half of a border is visible

我很困惑，因为必须让它在CSS中工作，才能有一个div，其中边框只能在宽度的一半上可见。边框样式是一个简单的1px solid #000;但是，我希望div边框的顶部不是到处都可见(在div宽度上100% )，而只在div宽度的前50%上可见。我在任何地方都找不到这样的例子，它需要以百分比表示，所以通常的技巧包(下半部...

问CSS -只有一半边框可见的边框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -只有一半边框可见的边框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -只有一半边框可见的边框
EN