开发者

CSS Border redundancy removal

I often find myself into this:

.class {
   border-top:1px dashed #0000000;
   bo开发者_开发技巧rder-bottom:1px dashed #0000000;
}

Is there a way to one-line that?

I tried this but doenst' work:

.class {
   border:1px 0 dashed #0000000;
}


No but you could make it simpler to maintain by using:

.my_class {
  border: 1px dashed #000;
  border-right: none;
  border-left: none;
}

That what you only need to change one line.


You can use properties for every "side" (top, right, bottom, left) for each single border property, in your case:

.class{
border-color: #000;
border-width: 1px 0;
border-style: dashed;

}

Note that you can specify every property for every side, for example:

.class{
border-color: #000 green blue yellow;
border-width: 1px 2px 3px 4px;
border-style: dashed solid dotted solid;

}


Nope, there's no one-liner for that in pure CSS - you can use the border shorthand only for all four sides at once.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜