CSS | Propiedad de ancho de esquema

El contorno es la línea que se crea alrededor del elemento especificado fuera del borde del elemento para que el particular sea distinto y más fácil de distinguir.

La propiedad de ancho de contorno se utiliza para especificar el ancho de este contorno para un elemento específico.

La propiedad de estilo de esquema debe declararse o usarse antes de que la propiedad de ancho de esquema se use en el elemento deseado. Lógicamente, un elemento debe tener un contorno para el cual se define o aplica estilo al ancho.

El contorno de un elemento se muestra alrededor del margen del elemento y no es lo mismo que la propiedad del borde. Como el contorno no forma parte de las dimensiones del elemento, las propiedades de ancho y alto del elemento no contienen el ancho del contorno.

Sintaxis :

outline-width: medium|thin|thick|length|initial|inherit;

Valores de propiedad :

medio: este valor establece el ancho del contorno predeterminado. El ancho del contorno es más delgado que el contorno definido como grueso y más grueso que el contorno definido como delgado.

outline-width: medium;

<html>
   <head>
      <title>
         CSS | outline-width Property
      </title>
   </head>
     
   <body>
      <p style = "outline-width:medium;
                  outline-style:solid;">
         This paragraph has medium outline.
      </p>
   </body>
</html>

Producción:

delgado: este valor establece el ancho del contorno en delgado, el contorno logrado es más delgado que el contorno especificado con ancho medio y grueso.

outline-width: thin;

<html>
   <head>
      <title>
         CSS | outline-width Property
      </title>
   </head>
     
   <body>
      <p style = "outline-width:thin; 
                  outline-style:solid;">
         This paragraph has thin outline.
      </p>
   </body>
</html>

Producción:

grueso: este valor establece el ancho del contorno en grueso, el contorno logrado es más grueso que el contorno especificado con ancho medio y pensar.

outline-width: thick;

<!DOCTYPE html>
<html>
   <head>
      <title>
         CSS | outline-width Property
      </title>
   </head>
     
   <body>
      <p style = "outline-width:thick; 
                  outline-style:solid;">
         This paragraph has thick outline.
      </p>
   </body>
</html>

Producción:

longitud: Este valor se utiliza para definir el grosor del contorno.

outline-width: 15px;

<!DOCTYPE html>
<html>
   <head>
      <title>
         CSS | outline-width Property
      </title>
   </head>
     
   <body>
      <p style = "outline-width:15px; 
                  outline-style:solid;">
         This paragraph has 15px outline.
      </p>
   </body>
</html>

Producción:

inicial: este valor establece el ancho del contorno en su valor predeterminado.

outline-width: initial;

<html>
   <head>
      <title>
         CSS | outline-width Property
      </title>
   </head>
     
   <body>
      <p style = "outline-width:initial; 
                  outline-style:solid;">
         This paragraph has initial outline.
      </p>
   </body>
</html>

Producción:

heredar: este valor hereda las especificaciones de la propiedad de ancho de contorno del padre.

outline-width: inherit;

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | outline-width Property
    </title>
</head>
      
<body>
    <p style = "outline-width:medium; 
                 outline-style:solid;">
        This paragraph has medium outline.
    </p>
      
    <p style = "outline-width:thin; 
                outline-style:solid;">
        This paragraph has thin outline.
    </p>
    <br>
      
    <p style = "outline-width:thick; 
                outline-style:solid;">
        This paragraph has thick outline.
    </p>
    <br>
      
    <p style = "outline-width:15px; 
                outline-style:solid;">
        This text has an outline of 15px.
    </p>
    <br><br> 
    <p style = "outline-width:initial; 
                outline-style:solid;">
        This text has an outline of default
        type set by initial
    </p>
      
</body>
</html>                    

Navegadores compatibles: El navegador compatible con CSS | Las propiedades de ancho de contorno se enumeran a continuación:

Google Chrome 1.0
Internet Explorer 8.0
Caja de fuego 1.5
Ópera 7.0
Safari 1.2

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta