gpt4 book ai didi

css - 有没有办法让左边框填充所有空间(没有内部间隙)?

转载 作者:行者123 更新时间:2023-12-03 23:43:59 25 4
gpt4 key购买 nike

我正在尝试使用以下代码使用 CSS 边框属性设置页面标题的样式:

h2 {
display: inline-block;
margin: 5px 0 5px 0;
padding: 0 0 0 5px;
background-color: #eee;
border-color: #aaa;
color: #000;
border-style: dotted dotted dotted solid;
border-width: 1px 1px 1px 5px;
}
结果是
enter image description here ,
没关系,但左边框有“尖尖”的提示,有间隙(看起来像是一种“规定”,在这种情况下,不存在类似的边框),如下图所示
left border with pointy tips, showing gap up-close
有没有办法获得左边框的“方形”提示?

最佳答案

不,您不能使用本地边界。但是你可以使用 :before 来伪造它元素:

h2 {
position: relative; /* make title relative */
display: inline-block;
margin: 5px 0 5px 0;
padding: 0 0 0 5px;
background-color: #eee;
border-color: #aaa;
color: #000;
border-style: dotted dotted dotted solid;
border-width: 1px 1px 1px 5px;
}

h2:before {
content: "";
position: absolute;
height: calc(100% + 2px); /* 2px is the addition of the border-bottom (1px) and the border-top (1px) */
width: 5px; /* same size than the border-left */
background-color: #aaa;
left: -5px;
top: -1px; /* size of the border-top */
}
<h2>A title</h2>

关于css - 有没有办法让左边框填充所有空间(没有内部间隙)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64066775/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com