gpt4 book ai didi

html - 如何在框外设置 CSS border-left

转载 作者:搜寻专家 更新时间:2023-10-31 22:30:15 25 4
gpt4 key购买 nike

我有 3 个边框的元素:左(4px)、上(1px)和下(1px):

enter image description here

但是 border-left 看起来像这样:

enter image description here

如何在框外设置border-left,渲染时不切边?

这是我的代码示例:

HTML:

<a class="element">Some Text</a>

CSS:

.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 4px solid red;
}

最佳答案

解决了在 CSS 中使用 :before 伪元素的问题:

.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
position: relative; /* Make sure you have this */
padding-left: 8px; /* Nudge the text by few pixels in the box */
}

.element:before {
content: "";
background-color: red;
display: block;
width: 4px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

关于html - 如何在框外设置 CSS border-left,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20581392/

25 4 0