CSS: propriétés groupant

Question

.myclass { 
    border-top: solid 1px gray; 
    border-bottom: solid 1px gray; 
    background: #F2F2F2; 
} 

Est-il possible de propriétés du groupe qui partagent une définition commune, comme border-top et border-bottom dans l'exemple ci-dessus.

Quelque chose comme:

.myclass { 
    border-top , border-bottom: solid 1px gray; /* <-- grouped properties */ 
    background: #F2F2F2; 
} 

TIA,

Answer 1

Vous pouvez en utilisant moins ou SASS (je crois), mais si vous ne voulez pas utiliser ceux-ci, vous pouvez au lieu sélecteurs de groupe qui auront la même propriété:

.myclass, 
.myOtherClass, 
.myAnotherClass, 
#anIdForGoodMeasure 
{ 
    border-top: solid 1px gray; 
    border-bottom: solid 1px gray; 
    background: #F2F2F2; 
} 

Ceci appliquera le style à tous les éléments.

Answer 2

Malheureusement, la bordure n'a pas de version abrégée (comme par exemple margin/padding), elle doit être identique pour tous ou différente.

Cependant, ce que vous pouvez faire est de dire que vous voulez styler un seul côté, spécifiez toutes les cases, puis en dessous de, remplacez-le par un style individuel. Heres un peu de ce que je veux dire.

http://jsfiddle.net/XxWwn/

Answer 3

Je pense que je vois ce que vous essayez de faire ici,

Ceci est la seule frontière sténographie Je sais que, sans utiliser SASS/MOINS.

.myclass { 
    border-color: red blue green coral; 
    border-width: 1px 2px 3px 4px; 
    border-style: solid; 
} 

Ce même raccourci que les marges et le rembourrage (haut, droite, en bas, à gauche)