在CSS中组合border-top,border-right,border-left,border-bottom

时间:2010-06-27 09:45:05

标签: css

是否有一种方法可以将CSS中的border-top,border-right,border-left,border-bottom组合起来,就像超级简写风格一样。

例如:

border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);

5 个答案:

答案 0 :(得分:105)

不,你不能在一个声明中设置它们 在一般情况下,您至少需要三个属性:

border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;

然而,这将是非常混乱的。它有四个可读性和可维护性:

border-top:    1px solid  #ff0;
border-right:  2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left:   5px solid  #09f;

答案 1 :(得分:11)

你的情况是极端的,但这里有一个解决方案,适合更常见的场景,想要设置少于4个边框的样式。

border: 1px dashed red; border-width: 1px 1px 0 1px;

更短,也更容易阅读
border-top: 1px dashed red;  border-right: 1px dashed red; border-left: 1px dashed red;

border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;

答案 2 :(得分:1)

我可以解决这个问题,应该有类似...的速记

border: 1px solid red top bottom left;

那当然行不通!科比的回答给了我一个主意。假设您想做上,下和左,但不做对。不用做border-top:border-left:border-bottom :(三个语句),您可以这样做两个,而零则取消右侧。

border: 1px dashed yellow;
border-width:1px 0 1px 1px;

用两个语句代替三个语句:-D

答案 3 :(得分:0)

不,你不能把它们设置为单一的 例如,如果你有     DIV {     border-top:2px纯红色;     border-right:2px纯红色;     border-bottom:2px纯红色;     border-left:2px纯红色;     } 所有四肢的相同属性,然后您可以将它们设置为单行

div{border:2px solid red;}

答案 4 :(得分:-3)

如果所有边框都有相同的样式,只需:

border:10px;