English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
(outline) La línea de contorno es una línea dibujada en el borde exterior del borde del elemento (por ejemplo, botones, campos de formulario activos, etc.) para resaltarlo.
El contorno se utiliza generalmente para resaltar elementos. El contorno se parece mucho al borde a primera vista, pero tiene diferencias en los siguientes aspectos:
El contorno no ocupa espacio, ya que siempre se coloca en la parte superior de la caja del elemento, lo que puede causar que se superponga con otros elementos en la página.
A diferencia del borde, el contorno no permite que configuremos diferentes anchos para cada borde ni diferentes colores y estilos para cada borde. El contorno es idéntico en todos los aspectos.
El contorno no tiene ningún efecto en los elementos circundantes, excepto por superponerse.
A diferencia del borde, el contorno no cambia el tamaño o la posición del elemento.
El contorno puede no ser rectangular.
Nota:Si se coloca el contorno en el elemento, ocupará el mismo espacio en la página web, como si no hubiera contorno en el elemento.
outline-La propiedad width especifica el ancho del contorno que se debe agregar al elemento. Su valor debe ser una longitud CSS (px, pt, em, etc.) o uno de los términos clave permitidos, pero no se permiten porcentajes o valores negativos. Al igual queborde-widthpropiedad igual.
p {
outline-width: grueso;
}Prueba aquí‹/›Nota:Si outline-Si falta o no se especifica el valor de width, se usará el valor predeterminado (medium) en su lugar.
El outline-La propiedad de estilo establece el estilo del contorno, como: sólido, punteado, etc.
Esta propiedad puede tomar uno de los siguientes valores: none, hidden, dashed, dotted, double, groove, inset, outset, ridge y solid. Al igual queborde-styleLos valores son iguales.
none: no se define contorno.
dotted: definir un contorno punteado
dashed: definir un contorno punteado
solid: definir un contorno sólido
double: definir dos contornos. El ancho de los dos contornos es igual al valor del ancho del contorno
groove: definir3D contorno de surco. El efecto depende del valor del color del contorno
ridge: definir3D contorno de relieve. El efecto depende del valor del color del contorno
inset: definir3D insertar el contorno. El efecto depende del valor del color del contorno
outset: definir3D inicio del contorno. El efecto depende del valor del color del contorno
p {
outline-style: sólido;
}Prueba aquí‹/›outline-La propiedad de color establece el color del contorno.
p {
outline-style: sólido;
outline-color: #0000ff;
}Prueba aquí‹/›También puede establecer outline-color transparente.
Nota:outline-color Si se utiliza este atributo solo, no tendrá efecto. Utilice outline-El atributo style se establece primero el contorno.
La propiedad outline de CSS es una propiedad abreviada de atajo para establecer una o más propiedades individuales de contorno, outline-style, outline-ancho y outline-color en una regla única.
p {
outline: 5px sólido #9acd32;
}Prueba aquí‹/›Si se omite o no se especifica el valor de una propiedad individual de contorno al establecer la propiedad de atajo de contorno, outline utilizará el valor predeterminado de la propiedad (si lo hay).
Nota:outline-colorAl establecer el contorno del elemento, si falta el valor de la propiedad o no se especifica el valor de la propiedad (por ejemplo, outline: 5px sólido;), el elementocolorLa propiedad se utilizará como el valor outline-color。
En el siguiente ejemplo, el contorno será de anchura5línea sólida negra de px:
p {
color: negro;
outline: 5px sólido;
}Prueba aquí‹/›pero, en el casooutline-style，omitir este valor no mostrará ningún contorno porque outline-El valor predeterminado de styleproperty es none.
En el siguiente ejemplo, no habrá contorno:
p {
outline: 5px #00ff00;
}Prueba aquí‹/›Advertencia: Internet Explorer 7y versiones anteriores no admiten la propiedad outline. IE8 outline solo está<!DOCTYPE>El soporte para esta propiedad solo se proporciona cuando se especifica a.
La propiedad outline se utiliza ampliamente para eliminar la línea punteada alrededor de los enlaces activos.
a, a:acive, a:focus {
outline: none; /* Trabaja en Firefox, Chrome, IE8 y superior */
}Prueba aquí‹/›