首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS -只有一半边框可见的边框

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

Stack Overflow用户
提问于 2012-01-10 21:59:08
回答 3查看 87.2K关注 0票数 38

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

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

但是,我希望div边框的顶部不是到处都可见(在div宽度上100% ),而只在div宽度的前50%上可见。

我在任何地方都找不到这样的例子,它需要以百分比表示,所以通常的技巧包(下半部分的图像,...)。

EN

回答 3

Stack Overflow用户

发布于 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>

票数 30
EN

Stack Overflow用户

发布于 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>

票数 4
EN

Stack Overflow用户

发布于 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>

这是我用来放半边框的代码谢谢你利奥

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8804417

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档