CSS | Propiedad de estilo de esquema

Posted on by Rudeus Greyrat

La propiedad de estilo de contorno en CSS se utiliza para establecer la apariencia del contorno de un elemento. El contorno y el borde de un elemento son similares, pero no iguales. El contorno no ocupa espacio y se dibuja fuera del borde de un elemento. Además, el contorno se dibuja alrededor de los cuatro lados del elemento de forma predeterminada y no hay forma de modificarlo. 

Sintaxis:

outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|
inset|outset|initial|inherit;

Valores de propiedad:

  • auto: Establece el contorno de un elemento a través del navegador. 

Sintaxis:

outline-style: auto;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                 
                /* CSS Property for outline-style */
                outline-style: auto;
            }
        </style>
     
    </head>
     
    <body>
        <!-- outline-style: auto;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   

Producción:

 CSS Property | outline-style-auto

  • ninguno: Es el valor por defecto y establece el ancho del contorno a cero. Por lo tanto, no es visible. 

Sintaxis:

outline-style: none;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                 
                /* CSS Property for outline-style */
                outline-style: none;
            }
        </style>
     
    </head>
     
    <body>
         
        <!-- outline-style: none;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   

Producción:

 CSS Property | outline-style-none

  • dotted: Se utiliza para establecer una serie de puntos alrededor del elemento como contorno. 

Sintaxis:

outline-style: dotted;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                 
                /* CSS Property for outline-style */
                outline-style: dotted;
            }
        </style>
     
    </head>
     
    <body>
         
        <!-- outline-style: dotted;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   

Producción:

 CSS Property | outline-style-dotted

  • punteado: se utiliza para establecer una serie de segmentos de línea punteada alrededor del elemento como contorno. 

Sintaxis:

outline-style: dashed;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                 
                /* CSS Property for outline-style */
                outline-style: dashed;
            }
        </style>
     
    </head>
     
    <body>
         
        <!-- outline-style: dashed;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   

Producción:

 CSS Property | outline-style-dashed

  • sólido: se utiliza para establecer un segmento de línea sólida alrededor del elemento como contorno. 

Sintaxis:

outline-style: solid;

Ejemplo: 

html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS outline-style property</title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
      h1{
        color: green;
        text-align: center;
         
        /* CSS Property for outline-style */
        outline-style: solid;
      }
    </style>
 
  </head>
 
  <body>
      <!-- outline-style: solid;-->
      <h1>GeeksForGeeks</h1>
  </body>
 
</html>

Producción:

 CSS Property | outline-style-solid

  • double: Establece segmentos de línea duplicados alrededor del elemento como contorno. El ancho del contorno es igual a la suma del ancho de los segmentos de línea individuales y el espacio entre ellos.

Sintaxis:

outline-style: double;

Ejemplo: 

html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS outline-style property</title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
      h1{
        color: green;
        text-align: center;
         
        /* CSS Property for outline-style */
        outline-style: double;
      }
    </style>
 
  </head>
 
  <body>
      <!-- outline-style: double;-->
      <h1>GeeksForGeeks</h1>
  </body>
 
</html>

Producción:

 CSS Property | outline-style-double

  • Groove: establece segmentos de línea ranurada alrededor del elemento como contorno, lo que da la sensación de que está tallado. 

Sintaxis:

outline-style: groove;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                 
                /* CSS Property for outline-style */
                outline-style: groove;
            }
        </style>
     
    </head>
     
    <body>
         
        <!-- outline-style: groove;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   

Producción: 

CSS Property | outline-style-groove

  • ridge: establece segmentos de línea con estrías alrededor del elemento como contorno, lo que da la sensación de que se está extruyendo. Es opuesto al de un surco. 

Sintaxis:

outline-style: ridge;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                 
                /* CSS Property for outline-style */
                outline-style: ridge;
            }
        </style>
    </head>
     
    <body>
         
        <!-- outline-style: ridge;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   

Producción:

 CSS Property | outline-style-ridge

  • recuadro: establece segmentos de línea incrustados alrededor del elemento como contorno, lo que nos hace sentir que está fijo en la pantalla. 

Sintaxis:

outline-style: inset;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                 
                /* CSS Property for outline-style */
                outline-style: inset;
            }
        </style>
    </head>
     
    <body>
         
        <!-- outline-style: inset;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   

Producción:

 CSS Property | outline-style-inset

  • outset: Establece segmentos de línea alrededor del elemento que parece estar saliendo, como contorno. Es lo opuesto al recuadro. 

Sintaxis:

outline-style: outset;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                 
                /* CSS Property for outline-style */
                outline-style: outset;
            }
        </style>
    </head>
     
    <body>
         
        <!-- outline-style: outset;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   

Producción: 

CSS Property | outline-style-outset

  • initial: se utiliza para establecer la propiedad de estilo de contorno en su valor predeterminado. Establece el ancho del contorno a cero. Por lo tanto, el contorno no es visible. 

Sintaxis:

outline-style: initial;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color: green;
                text-align: center;
                outline-width: 5px;
                outline-color: black;
         
                /* CSS Property for outline-style */
                outline-style: initial;
            }
        </style>
    </head>
     
    <body>
         
        <!-- outline-style: initial;-->
        <h1>GeeksForGeeks</h1>
    </body>
 
</html>                   

Producción:

 CSS Property | outline-style-initial

  • heredar: hace que la propiedad de estilo de esquema se herede de su elemento principal. 

Sintaxis:

outline-style: inherit;

Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            * {
                padding: 1px;
            }
            body {
                outline-style: dashed;
            }
            h1 {
                color: green;
                text-align: center;
                outline-width: 5px;
                outline-color: black;
         
                /* CSS Property for outline-style */
                outline-style: inherit;
            }
        </style>
    </head>
     
    <body>
         
        <!-- outline-style: inherit;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   

Producción:

 CSS Property | outline-style-inherit

Navegadores compatibles: los navegadores compatibles con la propiedad de estilo de contorno se enumeran a continuación:

  • Google Chrome 1.0
  • Borde 12
  • explorador de Internet 8
  • Firefox 1.5
  • Ópera 7.0
  • Safari 1.2

Publicación traducida automáticamente

Artículo escrito por Husban y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *