Question

I came across an unusual issue with dynamic borders in CSS. I am trying to "restore" / show a certain side of a border which has been disabled by either setting its width to zero border-left-width:0; or using border-left:none; The problem is that I don't want to repeat the same border properties since it should be an adaptive dynamic solution where the hidden border should inherit the element's already set border. Example code: JSFiddle /* ================== chic ================== */ body, html { margin: 0; padding: 0; font-family:Verdana, sans-serif; height: 100%; text-align: center;font-weight: bold; background:#62726b; color:#abd4b1; } div { padding:50px; position: absolute; left:0; right:0; margin: 0 auto; width:50%; top:50%; transform:translateY(-50%); } /* ============= setting border ============= */ div { border:5px dashed #abd4b1; border-right:none; /* hide right border */ border-left-width:0; /* hide left border by setting width to zero */ } /* restoring borders */ div { border-right: inherit; /* attempt 1 - make border inherit previous properties */ border-right: initial; /* attempt 2 - resest border to initial state */ border-left-width: inherit; /* attempt 3 - inherit the border width */ border-left-width: initial; /* attempt 4 - reset border width to initial state */ } <div>ALL YOUR BORDERS ARE BELONG TO US</div> Observation 1: a border side will not inherit its "parent" border Observation 2: using initial resets the border to browser default (I guess that's logical to happen) So the question really is can a hidden/disabled border side be shown using pure CSS without repeating the border property twice?

Answer 1

所以问题是否可以使用纯CSS显示隐藏/禁用的边框，而不重复边框属性两次？

我怀疑你的真实问题是，正如你的评论所给出的那样，

有趣的是，类切换可以解决问题，现在有没有办法通过css覆盖而不是类来模拟它？

......答案是，不，因为那不是级联的工作方式。元素在任何给定时间只能有一个属性值。所以要么一个元素有一个边框，或它没有，这是通过解析 all 与该元素匹配的边界声明并确定哪个匹配声明中的一个获胜。

inherit无法正常工作，因为没有父级边框可以继承。（从技术上讲，它只是将它设置为medium none currentColor的初始值，并且这是继承的内容。）

initial无法正常工作，因为border-width和border-style的初始值分别为medium和none - 且只有一个他们实际上禁用了边界;另一个将其设置为任意非零宽度。（另外，this has nothing to do with browser defaults。）

您可以在CSS属性的多个可能值之间切换的唯一方法是声明分配给同一元素的多个可能类名之一中的每个值：

div {
    border: 5px dashed #abd4b1;
}

div.norightborder {
    border-right-style: none; /* hide right border */
}

div.noleftborder {
    border-left-width: 0; /* hide left border by setting width to zero */
}

...除了预期之外，还使用覆盖规则。第一条规则保证匹配元素，只要它是div;后两个规则仅在类名存在时才匹配，并且由于更具体而覆盖第一个规则，但第一个规则和其速记声明指定的值不受影响，恢复它们只是省略类名的问题，或至少在事后删除它们。

Answer 2

边境不是父母。当您应用#!/bin/bash sqlplus -S -L USERNAME/PASSWORD@"SERVICE_NAME" <<EOF set feedback off trimspool on SELECT * FROM TABLE; spool off; EXIT EOF时，它会将所有边框设置为该样式。像，

border:5px dashed #abd4b1;

当您应用border-right: 5px dashed #abd4b1; border-bottom: 5px dashed #abd4b1; border-left: 5px dashed #abd4b1; border-top: 5px dashed #abd4b1;时，不再有早期样式的记忆。

尝试以相反的顺序应用它。

border-right:none;

所以真正的问题是可以显示隐藏/禁用的边框使用纯CSS而不重复border属性两次？

不，你不能。您可以将其重置为初始状态，但不能重置为要设置的样式。你必须重复它。

div {
    border-right:none;   /* hide right border */
    border-left-width:0; /* hide left border by setting width to zero */
    border:5px dashed #abd4b1;
}

您可以使用LESS将样式另存为变量并重复使用。但这不是纯粹的CSS。

How to make a hidden border side inherit border properties in CSS

2 个答案: