我想在左边有一个 4px 厚的粉红色和 1px 灰色的边框：
border: 1px solid #E5E5E5;
border-left: 4px solid #F24495;
问题是连接是对角的，所以我得到了一个可怕的覆盖。我试过：
.item:before{
border-left: 4px solid #F24495;
}
但没有运气。
jsFiddle 示例
截屏
问问题
20930 次
4 回答
35
.item::before是正确的方法，但它需要在单个border-left属性之外进行一些工作。您需要使伪元素可见 ( display: block; content: "";)，将伪元素放置在 的左侧.item，然后将其拉伸以与顶部和底部边框正确对齐。
虽然这可以手动完成，但我强烈建议使用CSS 变量（或预处理器中的变量），因为它可以减少更新边框宽度的错误和痛苦。
.item {
display: inline-block;
padding: 0.2em 0.3em;
background: #f8f8f8;
color: #454545;
/* Set border widths with variables */
--top-border-width: 4px;
--bottom-border-width: var(--top-border-width);
--left-border-width: 16px;
--right-border-width: var(--top-border-width);
/* Set border styles for each side */
border-top: var(--top-border-width) solid #e4e4e4;
border-bottom: var(--bottom-border-width) solid #e4e4e4;
border-right: var(--right-border-width) solid #e4e4e4;
/* Remove the left border and add blank space where the border should be placed */
border-left: 0;
margin-left: var(--left-border-width);
/* Contain the ::before */
position: relative;
}
.item::before {
/* Give the pseudo element substance */
display: block;
content: "";
/* Add a left border with a straight edge */
border-left: var(--left-border-width) solid #f84995;
/* Position pseudo element's border where the normal border would have been placed */
position: absolute;
top: calc(0px - var(--top-border-width));
bottom: calc(0px - var(--bottom-border-width));
left: calc(0px - var(--left-border-width));
}<h1 class="item">Gen.2</h1>于 2012-06-15T14:15:42.820 回答
6
这应该可以，但需要额外的标记：
.outer {
border: 1px solid #E5E5E5;
border-left: 0;
}
.inner {
border-left: 4px solid #F24495;
}
和
<div class="outer">
<div class="inner">
...
</div>
</div>
于 2012-06-15T14:07:26.777 回答
6
如果您希望使用:before伪选择器，您还需要设置一些内容。例如，请参阅带有以下示例代码的这个 jsfiddle ：
<div>Container</div>
CSS：
div {
border: 10px solid black;
border-left-width: 0;
}
div::before {
border: 10px solid orange;
border-right-width: 0;
content: '';
}
显示为：
编辑
嗯，虽然这应该严格回答问题，但在尝试将我的解决方案调整为问题的小提琴时，我发现这与填充效果不太好。打开可以处理该位的建议/编辑/其他答案:(...
于 2012-06-15T14:14:35.560 回答
1
背景
默认情况下，CSS 对所有边框关节使用斜接关节（45° 角）。因此，要为任何边框实现方形关节（90° 角），您可以使用 (1) 内部box-shadow，(2)伪元素或 (3) background-image和多个linear-gradients。
假设您有以下要设置样式的元素：
<div></div>
选项1：使用方形接头box-shadow
div {
/* downside of using box-shadow, you need to add the */
/* inner border size to the padding on top of any */
/* additional padding you might want */
padding: 20px;
/* by changing the order of your box-shadows, you */
/* can modify which borders overlap each other */
box-shadow:
/* left "inner border" */
inset 20px 0 0 0 red,
/* right "inner border" */
inset -20px 0 0 0 grey,
/* top "inner border" */
inset 0 20px 0 0 grey,
/* bottom "inner border" */
inset 0 -20px 0 0 grey;
}
选项2：方形接头pseudo-elements
div {
border: 20px solid grey;
}
div::before {
position: absolute;
background-color: red;
content: "";
width: 20px;
/* we need to add the height of the top and bottom */
/* border to the pseudo-elements' height as the */
/* inset border is not included in the height of the */
/* div even when "box-sizing: border-box" is set. */
height: calc(100% + 20px + 20px);
top: -20px;
left: -20px;
}
选项 3：方形接头使用background-image和多个linear-gradients
div {
/* downside of using multiple linear-gradients, you */
/* need to add the inner border size to the padding */
/* on top of any additional padding you might want */
padding: calc(20px + 10px);
background-image:
/* left "inner border" */
linear-gradient(to right, red 20px, transparent 20px),
/* right "inner border" */
linear-gradient(to left, grey 20px, transparent 20px),
/* top "inner border" */
linear-gradient(grey 20px, transparent 20px),
/* bottom "inner border" */
linear-gradient(to top, grey 20px, transparent 20px);
}
于 2019-01-27T16:10:42.643 回答