CSS: propiedades del esquema

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedades del esquema

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada contorno Con sintaxis y ejemplos.

describir

Las propiedades de contorno de CSS definen el ancho, el estilo de línea y el color del contorno de un elemento. Es una propiedad abreviada para establecer las propiedades CSS de ancho de contorno, estilo de contorno y color de contorno.

sintaxis

La sintaxis de la propiedad CSS del esquema es:

outline: outline-width outline-style outline-color;

parámetro o parámetro

El ancho del contorno es opcional. Es el ancho del contorno del elemento y puede ser uno de los siguientes:
(Si no se proporciona un ancho de contorno, el valor predeterminado es medio)

valordescribir
establevalor fijo en px, em, …
div {ancho del contorno: 2px;}
finamenteAncho de contorno delgado, puede ser 1px o 2px dependiendo del navegador
div {ancho del contorno: delgado;}
ModerarAncho de contorno medio, puede ser de 3px o 4px dependiendo del navegador
div {ancho del contorno: medio;}
GruesoAncho de contorno grueso, puede ser 5px o 6px dependiendo del navegador
div {ancho del contorno: grueso;}

Los estilos de contorno son opcionales. Es el estilo de línea del contorno del elemento y puede ser uno de los siguientes:

valordescribir
no cualquierasin contorno (este es el valor predeterminado)
div { estilo de esquema: ninguno; }
durosimple, recto, sólido
div {estilo de esquema: sólido;}
embellecidoserie de puntos
div {estilo de esquema: discontinuo;}
linea punteadaSerie de guiones
div {estilo de esquema: discontinuo;}
dobleDos líneas que suman la cantidad de píxeles definidos por el ancho del contorno
div {estilo de contorno: doble;}
ranuraefecto de grabado
div {estilo de esquema: surco;}
crestaEl contorno parece una apariencia 3D “fuera” (lado opuesto de la ranura)
div {estilo de contorno: cresta;}
ilustraciónApariencia incrustada
div {estilo de contorno: inserción;}
al principioApariencia en relieve (a diferencia de la ilustración)
div {estilo de contorno: inicio;}
carroEl estilo del contorno está determinado por el navegador.
div {estilo de esquema: automático;}
heredarEl elemento heredará el estilo de contorno de su elemento principal
div {estilo de esquema: heredar;}

El color del contorno es opcional. Es el color del contorno del elemento y puede ser uno de los siguientes:

valordescribir
#RRGGBBrepresentación hexadecimal del color del contorno
div { color de contorno: #FF0000; }
RGB()Representación RGB del color del contorno
div {color de contorno: rgb(255,0,0); }
nombreEl nombre del color del contorno (es decir, rojo, azul, negro, blanco)
div {color del contorno: rojo;}
al revésInvertir color de fondo
div {color del contorno: invertir;}
heredarEl elemento heredará el color del contorno de su elemento principal.
div {color del contorno: heredar;}

notas

  • Al usar las propiedades de contorno de CSS, puede proporcionar cualquier ancho de contorno, estilo de contorno y valores de color de contorno en cualquier orden.
  • ¿Necesita convertir sus valores de color a una representación diferente? Pruebe esta herramienta en línea para convertir sus valores de color entre hexadecimal y RGB.

Compatibilidad del navegador

Las propiedades del esquema CSS tienen soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • androide
  • Firefox (Geco)
  • Firefox móvil (Geco)
  • Internet Explorer 8+ (IE 8+)
  • IE Móvil 8+
  • Ópera 7+
  • Ópera Móvil 6+
  • Safari (WebKit)
  • Safari Móvil 3.1+

ejemplo

Discutiremos la propiedad de contorno a continuación, explorando cómo usar esta propiedad con los valores de ancho de contorno, estilo de contorno y color de contorno en CSS.

p { outline: solid black; }

En este ejemplo de contorno CSS, configuramos el contorno para que sea una línea negra sólida.

Puede combinar propiedades de esquema con otras etiquetas, como

etiqueta) juntos. Por ejemplo:

div { outline: 3px dashed #FF0000; }

Este ejemplo de esquema estará en

Dibuje una línea punteada roja de 3 píxeles de ancho alrededor del marcador.

(Visited 4 times, 1 visits today)