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)
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … div {ancho del contorno: 2px;} |
| finamente | Ancho de contorno delgado, puede ser 1px o 2px dependiendo del navegador div {ancho del contorno: delgado;} |
| Moderar | Ancho de contorno medio, puede ser de 3px o 4px dependiendo del navegador div {ancho del contorno: medio;} |
| Grueso | Ancho 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:
| valor | describir |
|---|---|
| no cualquiera | sin contorno (este es el valor predeterminado) div { estilo de esquema: ninguno; } |
| duro | simple, recto, sólido div {estilo de esquema: sólido;} |
| embellecido | serie de puntos div {estilo de esquema: discontinuo;} |
| linea punteada | Serie de guiones div {estilo de esquema: discontinuo;} |
| doble | Dos líneas que suman la cantidad de píxeles definidos por el ancho del contorno div {estilo de contorno: doble;} |
| ranura | efecto de grabado div {estilo de esquema: surco;} |
| cresta | El contorno parece una apariencia 3D “fuera” (lado opuesto de la ranura) div {estilo de contorno: cresta;} |
| ilustración | Apariencia incrustada div {estilo de contorno: inserción;} |
| al principio | Apariencia en relieve (a diferencia de la ilustración) div {estilo de contorno: inicio;} |
| carro | El estilo del contorno está determinado por el navegador. div {estilo de esquema: automático;} |
| heredar | El 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:
| valor | describir |
|---|---|
| #RRGGBB | representació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); } |
| nombre | El nombre del color del contorno (es decir, rojo, azul, negro, blanco) div {color del contorno: rojo;} |
| al revés | Invertir color de fondo div {color del contorno: invertir;} |
| heredar | El 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
div { outline: 3px dashed #FF0000; }Este ejemplo de esquema estará en