Hay una manera de combinar la frontera-top,frontera-derecho,de la frontera-izquierdo,de la frontera-parte inferior en la CSS como una super taquigrafía estilo.

por ejemplo:

border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);
InformationsquelleAutor Starx | 2010-06-27

5 Comentarios

  1. 113

    No, no se puede establecer de todos ellos en una sola instrucción.

    En el caso general, se necesitan al menos tres propiedades:

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

    Sin embargo, que sería muy complicado. Sería más legible y fácil de mantener con cuatro:

    border-top:    1px solid  #ff0;
    border-right:  2px dashed #f0F;
    border-bottom: 3px dotted #f00;
    border-left:   5px solid  #09f;
    • Gracias, puedo usar esto para crear lo que yo quería.
    • Esto funciona realmente agradable cuando usted está tratando de mostrar un borde en la parte superior e inferior: border-style: solid; border-width: 1px 0;
    • Es posible que desee agregar el punto y coma en su segundo fragmento.
    • es allí cualquier manera de combinar todo en una sola línea??
  2. 14

    Su caso es extremo, pero aquí es una solución para los demás que se ajusta a un escenario más común de querer estilo de menos de 4 fronteras exactamente el mismo.

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

    que es un poco más corto, y tal vez más fáciles de leer que

    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;
    • Su primera línea de código es la mejor opción creo y ahorra muchos bytes, especialmente en las grandes archivos CSS con un montón de limítrofes.
  3. 1

    Que pueden relacionarse con el problema, debe ser abreviada como…

    border: 1px solid red top bottom left;

    Por supuesto que no funciona! Kobi la respuesta que me dio una idea. Digamos que usted quiere hacer parte superior, inferior y a la izquierda, pero no a la derecha. En lugar de hacer de la frontera-top: border-left: frontera-parte inferior: (tres declaraciones) se puede hacer de dos, como en este, el cero se cancela el lado derecho.

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

    Dos declaraciones en lugar de tres, pequeña mejora 😀

  4. 0

    No se puede establecer como uno solo
    por ejemplo, si usted tiene
    div{
    frontera-top: 2px solid red;
    frontera-derecho: 2px solid red;
    border-bottom: 2px solid red;
    border-left: 2px solid red;
    }
    mismas propiedades para todos los fours entonces se puede establecer en una única línea de

    div{border:2px solid red;}
    • No te creo, tu punto ya está contestada por otras respuestas?
  5. -4

    O si todas las fronteras tienen el mismo estilo, solo que:

    border:10px;
    • Lo siento, me he perdido el punto, Ver mi Pregunta para la actualización

Dejar respuesta

Please enter your comment!
Please enter your name here