我很困惑,因为必须让它在CSS中工作,才能有一个div,其中边框只能在宽度的一半上可见。
边框样式是一个简单的1px solid #000;
但是,我希望div
边框的顶部不是到处都可见(在div
宽度上100% ),而只在div
宽度的前50%上可见。
我在任何地方都找不到这样的例子,它需要以百分比表示,所以通常的技巧包(下半部分的图像,...)。
发布于 2012-01-10 22:19:09
这样行得通吗:
#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>
发布于 2021-07-07 17:54:18
您可以使用CSS渐变边框
.half-a-border-on-top {
border-top: 1px solid;
border-image: linear-gradient(to right, #000 50%, #FFF 50%) 100% 1;
}
<span class="half-a-border-on-top">Hello world!</span>
发布于 2015-09-10 01:39:47
让我们来看看我是如何编辑leo的代码,把左边的半个边框放在中间。
试试这个:
html代码
<div class="half-a-border-on-left">Hello world!</div>
css代码
<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>
这是我用来放半边框的代码谢谢你利奥
https://stackoverflow.com/questions/8804417
复制相似问题