Combina border-top, border-right, border-left, border-bottom in CSS

Question

C'è un modo di combinare border-top, border-right, border-left, border-bottom in CSS come uno stile super shorthand.

esempio:

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

Answer 1

No, non è possibile li tutti insieme in una singola istruzione.
Al caso generale, avete bisogno di almeno tre proprietà:

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

tuttavia, che sarebbe piuttosto confusa. Sarebbe più leggibile e gestibile con quattro:

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

Answer 2

O se tutte le frontiere hanno lo stesso stile, basta:

border:10px; 

Answer 3

No, non si può impostarle come singolo per esempio se si dispone div { border-top: 2px solid red; border-right: 2px rosso fisso; bordo inferiore: 2 px rosso fisso; bordo-sinistra: 2 px rosso fisso; } stesse proprietà per tutti i quattro zampe poi li si può impostare in un'unica linea

div{border:2px solid red;} 

Answer 4

Il tuo caso è un caso estremo, ma qui è una soluzione per gli altri che si inserisce uno scenario più comune di voler per lo stile meno di 4 confina esattamente allo stesso modo.

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

che è un po 'più breve, e forse più facile da leggere rispetto

border-top: 1px dashed red; border-right: 1px dashed red; border-left: 1px dashed red; 

o

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