CSS
Contornos
Buscar..
Sintaxis
- contorno: contorno de color contorno de estilo contorno de ancho | inicial | heredar;
- ancho del contorno: medio | delgado | grueso | longitud | inicial | heredar;
- esquema de estilo: ninguno | oculto | punteado | punteado | sólido doble | surco cresta inserción inicio | inicial | heredar;
Parámetros
| Parámetro | Detalles |
|---|---|
| punteado | contorno punteado |
| precipitado | contorno discontinuo |
| sólido | contorno sólido |
| doble | doble contorno |
| ranura | Contorno ranurado 3D, depende del valor del contorno del color. |
| cresta | Esquema acanalado 3D, depende del valor del color del contorno |
| recuadro | Contorno 3D inserto, depende del valor del contorno-color. |
| comienzo | Contorno de inicio 3D, depende del valor del contorno del color. |
| ninguna | sin contorno |
| oculto | contorno oculto |
Observaciones
outline ahora se describe en la IU básica , un módulo CSS de nivel 3 (ya se describió en REC CSS2.1)
La propiedad de esquema se define de forma predeterminada en los navegadores para elementos :focus en :focus estado de :focus .
No debe eliminarse, consulte http://outlinenone.com que indica:
¿Qué hace la propiedad de esquema?
Proporciona comentarios visuales para enlaces que tienen "enfoque" cuando navega por un documento web usando la tecla TAB (o equivalente). Esto es especialmente útil para las personas que no pueden usar un mouse o tener una discapacidad visual. Si elimina el esquema, está haciendo que su sitio sea inaccesible para estas personas. (…)
Ejemplos relacionados interesantes sobre desbordamiento de pila:
Visión general
El contorno es una línea que gira alrededor del elemento, fuera del borde. A diferencia de los border , los contornos no ocupan espacio en el modelo de cuadro. Por lo tanto, agregar un esquema a un elemento no afecta la posición del elemento u otros elementos.
Además, los esquemas pueden ser no rectangulares en algunos navegadores. Esto puede suceder si el outline se aplica en un elemento span que tiene texto con diferentes propiedades de font-size dentro de él. A diferencia de los bordes, los contornos no pueden tener esquinas redondeadas.
Las partes esenciales del outline son outline-color outline-style outline-width .
La definición de un esquema es equivalente a la definición de un borde:
Un contorno es una línea alrededor de un elemento. Se muestra alrededor del margen del elemento. Sin embargo, es diferente de la propiedad de la frontera.
outline: 1px solid black;
esquema de estilo
La propiedad de outline-style se utiliza para establecer el estilo del esquema de un elemento.
p {
border: 1px solid black;
outline-color:blue;
line-height:30px;
}
.p1{
outline-style: dotted;
}
.p2{
outline-style: dashed;
}
.p3{
outline-style: solid;
}
.p4{
outline-style: double;
}
.p5{
outline-style: groove;
}
.p6{
outline-style: ridge;
}
.p7{
outline-style: inset;
}
.p8{
outline-style: outset;
}
HTML
<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>
