是否有一种方法可以将CSS中的border-top,border-right,border-left,border-bottom组合起来,就像超级简写风格一样。
例如:
border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);
答案 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;