23-Contornos de colores en css

Ejemplos de contornos en css

El color se puede configurar mediante:

• nombre - especifique un nombre de color, como "rojo"
• HEX: especifique un valor hexadecimal, como "#ff0000"
• RGB: especifica un valor RGB, como "rgb(255,0,0)"

• HSL:

  especifique un valor HSL, como "hsl(0, 100%, 50%)"

• invertir:

  realiza una inversión de color (lo que garantiza que el contorno sea visible, independientemente del color de fondo)

El siguiente ejemplo muestra algunos contornos diferentes con diferentes colores. Observe también que estos elementos también tienen un borde negro delgado dentro del contorno:

style=" border: 2px solid black;outline-style: solid;outline-color: red;"

style="border: 2px solid black;outline-style: dotted;outline-color: blue;"

style="border: 2px solid black;outline-style: outset;outline-color: grey;"

---

...

La propriedad outline es una propiedad abreviada para establecer las siguientes propiedades de contorno individuales:

ejemplos

style="outline: dashed"

style="outline: dotted red;"

style="outline: 5px solid yellow;"

style="outline: thick ridge pink;"

---

Desplazamiento de contorno

La propriedad outline-offset agrega espacio entre un contorno y el borde/borde de un elemento. El espacio entre un elemento y su contorno es transparente.

Este párrafo tiene un contorno de 15 px fuera del borde del borde.

Codigo

    p{
      margin: 30px;
      border: 1px solid black;
      outline: 1px solid red;
      outline-offset: 15px;
    }

---

Ir al indice

---