CSS 在CSS中组合border-top、border-right、border-left、border-bottom
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3126995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Combining border-top,border-right,border-left,border-bottom in CSS
提问by Starx
Is there a way of combining border-top,border-right,border-left,border-bottom in CSS like a super shorthand style.
有没有办法像超级速记风格一样在 CSS 中组合 border-top、border-right、border-left、border-bottom。
eg:
例如：
border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);
回答by Kobi
No, you cannot set them all in a single statement.
At the general case, you need at least three properties:
不，您不能将它们全部设置在一个语句中。
在一般情况下，您至少需要三个属性：
border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;
However, that would be quite messy. It would be more readable and maintainable with four:
但是，那会很乱。使用四个将更具可读性和可维护性：
border-top: 1px solid #ff0;
border-right: 2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left: 5px solid #09f;
回答by DG.
Your case is an extreme one, but here is a solution for others that fits a more common scenario of wanting to style fewer than 4 borders exactly the same.
您的情况是一个极端的情况，但这里有一个适用于其他人的解决方案，该解决方案适合更常见的情况，即希望将少于 4 个边框的样式完全相同。
border: 1px dashed red; border-width: 1px 1px 0 1px;
that is a little shorter, and maybe easier to read than
这比
border-top: 1px dashed red; border-right: 1px dashed red; border-left: 1px dashed red;
or
或者
border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;
回答by PJ Brunet
I can relate to the problem, there should be a shorthand like...
我可以解决这个问题，应该有一个速记...
border: 1px solid red top bottom left;
Of course that doesn't work! Kobi's answer gave me an idea. Let's say you want to do top, bottom and left, but not right. Instead of doing border-top: border-left: border-bottom: (three statements) you could do two like this, the zero cancels out the right side.
这当然行不通！Kobi的回答给了我一个想法。假设您想做顶部、底部和左侧，而不是右侧。而不是做border-top：border-left：border-bottom：（三个语句）你可以像这样做两个，零抵消了右侧。
border: 1px dashed yellow;
border-width:1px 0 1px 1px;
Two statements instead of three, small improvement :-D
两个语句而不是三个，小的改进：-D
回答by Nitesh Agarwal
No you can't set them as single one for example if you have div{ border-top: 2px solid red; border-right: 2px solid red; border-bottom: 2px solid red; border-left: 2px solid red; } same properties for all fours then you can set them in single line
不，您不能将它们设置为单个，例如，如果您有 div{ border-top: 2px solid red; 右边框：2px 纯红色；边框底部：2px 纯红色；左边框：2px 纯红色；所有四肢的相同属性然后你可以在单行中设置它们
div{border:2px solid red;}
回答by jweber
Or if all borders have same style, just:
或者，如果所有边框都具有相同的样式，只需：
border:10px;
