17. CSS Outline (2)

CSS Outline width

La propiedad outline-width especifica el ancho del outline, y puede tener uno de los siguientes valores:

• thin (normalmente 1px)
• medium (normalmente 3px)
• thick (normalmente 5px)
• un tamaño específico (in, px, pt, cm, em…)

Ejm

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

CSS Outline color

La propiedad outline-color se utiliza para poner color a outline.

Puede tener los siguientes valores:

• nombre del color: especifica un nombre de color, por ejm “red”
• HEX: especifica un valor hexadecimal, como “#ff0000”
• RGB: especifica un valor RGB, como rgb(255,0,0)
• HSL: especifica 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)

Ejm

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

La propiedad outline se especifica como uno, dos o tres valores de la lista anterior. El orden de los valores no importa.El siguiente ejemplo muestra algunos contornos especificados con la propiedad de contorno abreviado.

Ejm

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

CSS Outline offset

La propiedad outline-offset agrega espacio entre un contorno y el borde/borde de un elemento. El espacio entre un elemento y su contorno es transparente. El siguiente ejemplo especifica un contorno de 15 px fuera del borde del borde.

Ejm

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