Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
Un esquema es una línea que se dibuja alrededor de los elementos (outside the borders) para hacer que el elemento "stand out" .
Entre las opciones de estilo de esquema especifica el estilo de un esquema.
| Valor por defecto: | none |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS2 |
| la sintaxis de JavaScript: | object .style.outlineStyle="dashed" Try it |
Notas y sugerencias
Un esquema es una línea alrededor de un elemento. Se muestra todo el margen del elemento. Sin embargo, es diferente de la propiedad border.
El esquema no es una parte de las dimensiones del elemento, por lo tanto, las propiedades de anchura y altura del elemento no contienen el ancho del contorno.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Note: IE8 es compatible con la propiedad de estilo de esquema sólo si se especifica un! DOCTYPE.
sintaxis CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| none | Especifica sin contorno. Esto es por defecto | Juegalo " |
| hidden | Especifica un esquema oculto | Juegalo " |
| dotted | Especifica un contorno de puntos | Juegalo " |
| dashed | Especifica una línea discontinua | Juegalo " |
| solid | Especifica una línea de trazo continuo | Juegalo " |
| double | Especifica un doble estructurador | Juegalo " |
| groove | Especifica un contorno acanalado 3D. El efecto depende del valor de contorno color | Juegalo " |
| ridge | Especifica un esquema surcado 3D. El efecto depende del valor de contorno color | Juegalo " |
| inset | Especifica un esquema de inserción 3D. El efecto depende del valor de contorno color | Juegalo " |
| outset | Especifica un esquema de principio 3D. El efecto depende del valor de contorno color | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Ajuste el estilo de un esquema utilizando valores diferentes:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;} Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: Esquema CSS
Referencia CSS: outline property
Referencia HTML DOM: outlineStyle property