recursal/MDN huggingface dataset:
-webkit-mask-repeat-x
=====================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La propiedad CSS `-webkit-mask-repeat-x` especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera horizontal.

|  |  |
| --- | --- |
| Valor inicial | `repeat` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Síntaxis
--------


```css
/\* Palabras Clave Valor \*/
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;

/\* Múltiples valores \*/
-webkit-mask-repeat-x: repeat, no-repeat, space;

/\* Valores globales \*/
-webkit-mask-repeat-x: inherit;
-webkit-mask-repeat-x: initial;
-webkit-mask-repeat-x: unset;
```

Valores
-------

repeat

La imagen de máscara se repite tanto horizontal como verticalmente.

no-repeat

La imagen de máscara no se repite; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.

space

La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas a ambos lados del elemento y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad `mask-position` a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.

round

Al aumentar el espacio la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una achura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una anchura de 300px y, entonces, se añadirá otra que se encogerá hasta 225px.

### Síntaxis Formal

Error: could not find syntax for this itemEjemplos
--------


```css
.exampleone {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: repeat;
}

.exampletwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: no-repeat;
}
```

### Soporte para múltiples imágenes de máscara

Es posible especificar un `<repeat-style>` diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:


```css
.examplethree {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-x: repeat, space;
}
```


Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo el orden que se ha establecido.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además
----------

`-webkit-mask-repeat`, `-webkit-mask-repeat-y`
Valor calculado
===============

### Sumario

El valor **computed value** de una propiedad CSS es computado a partir de specified value de la siguiente forma:

* Mediante los valores especiales `inherit` y `initial`, y
* Realizando el cómputo necesario para alcanzar el valor descrito en la línea de "Computed value" del sumario de la propiedad.

El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.

Por ejemplo: si un elemento tiene un valor especificado de `font-size: 16px` y `padding-top: 2em`, el valor computado de `padding-top` es `32px` (el doble del tamaño de la fuente).

Sin embargo, para algunas propiedades (aquellas con porcentajes relativos a algo que necesita un formato para ser determinados, tales como width, margin-right, text-indent, y top) los valores especificados en porcentajes se tornan valores computados. Ademas,los números especificados sin unidades en la propiedad line-height se convierten en valores computados, según se especifica. Estos valores relativos que quedan tras realizar el cómputo, se hacen absolutos cuando se determina el used value.

El uso principal de computed value (ademas de ser un paso de transición entre specified value y used value) es inheritance, incluyendo la palabra clave inherit.

### Notas

La API DOM getComputedStyle devuelve used value, en lugar de computed value.

### Ver también

specified value, used value, actual value
border-bottom-color
===================

### Resumen

La propiedad `border-bottom-color` define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave `transparent`.

* `Valor inicial`: propiedad `color`
* Se aplica a: todos los elementos
* `Valor heredado`: non
* Porcentajes: N/A
* Medio : `visual` (en-US)
* `Valor calculado`: como se especifique o si proviene de la propiedad `color`, será el valor `color`.
### Sintaxis
```

border-bottom-color: couleur | transparent | inherit
```

### Valores

color

puede especificarse por un valor RGB hexa-decimal o regular o por una palabra clave predefinida (*azul*).


transparent

el elemento no tiene color propio, muestra el color del elemento atrás suyo en el árbol de apilado.

### Propiedades relacionadas

* `border-color`
* `border-left-color`
* `border-right-color` (en-US)
* `border-top-color`
### Ejemplos

Ver El Ejemplo Vivo
```

element {
 width: 300px;
        padding: 15px;
        border-bottom-size: 1px;
        border-bottom-style: solid;
        border-bottom-color: #000;
}
```

### Notas

* Color Chart by VisiBone (en)
* Sélecteur de couleur, chez yoyodesign (fr)
### Especificaciones

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

### Compatibilidad con navegadores

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Ver también

`border-bottom`, `border-color`, `border-bottom-style`, `border-bottom-width`
border-inline-end-color
=======================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`border-inline-end-color`** CSS property defines the color of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-color` y `border-bottom-color`, o `border-left-color`, y `border-right-color` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;
```


Propiedades relacionadas son `border-block-start-color`, `border-block-end-color`, y `border-inline-start-color`, que definen los otros colores del borde del elemento.

|  |  |
| --- | --- |
| Valor inicial | `currentcolor` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | computed color |
| Animation type | by computed value type |

### Valores

`<'color'>`

El color del borde. Mira `color`.

### Sintaxis formal
```

border-inline-end-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-end-color: red;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-color |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Mira también
------------

* Esta propiedad se asigna a una de las propiedades del borde físico: `border-top-color`, `border-right-color` (en-US), `border-bottom-color`, o `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`
-moz-force-broken-image-icon
============================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

`-moz-force-broken-image-icon` es una propiedad CSS extendida. El valor `1` fuerza un icono de imagen no encontrada aunque la imagen tenga el atributo `alt`. Cuando el valor es `0` la imagen actuará normalmente y solo mostrará el atributo `alt`.

**Nota:** Aunque el valor sea `1` el atributo `alt` se seguirá mostrando. Más información debajo.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | images |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Sintaxis
--------
```

-moz-force-broken-image-icon: <integer>;
```

### Valores

`<integer>`Ejemplos
--------


```css
img {
  -moz-force-broken-image-icon: 1;
  height: 100px;
  width: 100px;
}
```



```html
<img src="/enlace/roto/imagen.png" alt="Imagen con enlace roto" />
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

**Nota:** A no ser que la imagen tenga una altura y ancho especificados, el icono de imagen rota no se mostrará, pero el atributo alt no se mostrará si el valor de `-moz-force-broken-image-icon` es `1`.

Notas
-----

* Esta propiedad solo funcionará en los navegadores basados en Gecko
* No se recomienda el uso de esta propiedad. Se debería usar un atributo alt adecuado.
Ver también
-----------

* Error 58646 en Firefox
-webkit-text-stroke-color
=========================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La propiedad CSS **`-webkit-text-stroke-color`** especifica el color del trazo de los caracteres de texto. Si no se fija se usa el valor de la propiedad `color`.

|  |  |
| --- | --- |
| Valor inicial | `currentcolor` |
| Applies to | all elements |
| Heredable | yes |
| Valor calculado | computed color |
| Animation type | a color |

Síntaxis
--------


```css
/\* valores <color> \*/
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

/\* Valores gloables \*/
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: unset;
```

### Valores

`<color>`

El color del trazo.

### Síntaxis Formal
```

-webkit-text-stroke-color =   
  <color>    
  
```

Especificaciones
----------------

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-color |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además
----------

* Post en el blog Surfin' Safari anunciando esta característica
* Artículo en CSS-Tricks explicando esta característica
* `-webkit-text-fill-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
Herencia
========

### Resumen

El resumen de cada definición de propiedad CSS indica si esa propiedad es heredada por defecto ("Inherit: Yes") o no ("Inherit: no"). Esto controla lo que sucede al no especificar un valor concreto para una propiedad de un elemento.

### Propiedades heredadas

Cuando no se especifica un valor para un elemento de una propiedad **inherited property**, el elemento toma el `valor calculado` de la propiedad de su elemento padre. Sólo los elementos raíz de un documento obtienen el valor `inicial` dado en el resumen de la propiedad.

Un ejemplo característico de una propiedad heredada es la propiedad `color`. Definida con las siguientes reglas de estilo:
```

 p { color: green }
```


y el código HTML siguiente:
```

 <p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p>
```


las palabras "texto enfatizado" aparecerá en verde, ya que el elemento `em` ha heredado el valor de la propiedad `color` a partir del elemento `p`.*No* recoge el valor inicial de la propiedad (que es el color que es usado por el elemento raíz cuando la página especifica que no hay color).

### Propiedades no heredadas

Si no se especifica un valor para una propiedad no heredada (*non-inherited property*) (a veces llamada **reset property** en el código Mozilla), el elemento toma el valor `inicial` de dicha propiedad (como se especifica en el resumen de ésa propiedad).

Un ejemplo característico de una propiedad no heredada es la del `borde`. Definida con las siguientes reglas de estilo:
```

 p { border: medium solid }
```


y la etiqueta HTML:
```

 <p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p>
```


las palabras "texto enfatizado" no tendrán borde (ya que el valor inicial del `estilo de borde` es `none`).

### Notas

Las palabras de código `inherit` permiten al autor definir, explícitamente, la posibilidad de herencia. Funciona para las propiedades heredadas y las no heredadas.

### Ver también

`inherit`, `Valor inicial`
Categorías

Interwiki Languages
inset-block-end
===============

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`inset-block-end`** define el desplazamiento de final de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad `top`, `right`, `bottom`, o `left` dependiendo de la propiedad en los valores definidos para `modo de escritura`, `dirección` y `orientación de texto`.


```css
/\* <length> values \*/
inset-block-end: 3px;
inset-block-end: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-block-end: 10%;

/\* Keyword value \*/
inset-block-end: auto;

/\* Global values \*/
inset-block-end: inherit;
inset-block-end: initial;
inset-block-end: unset;
```


|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | positioned elements |
| Heredable | no |
| Percentages | logical-height of containing block |
| Valor calculado | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

Sintaxis
--------

### Valores

La propiedad `inset-block-end` toma los mismos valores de la propiedad `left`.

### Sintaxis formal
```

inset-block-end =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-block-end: 20px;
  background-color: #c8c800;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Mira también
------------

* Las propiedades que definen otras inserciones:: `inset-block-start`, `inset-inline-start`, y `inset-inline-end`
* Las propiedades físicas mapeadas: `top`, `right`, `bottom`, y `left`
* `writing-mode`, `direction`, `text-orientation`
:root
=====

La pseudo-clase **`:root`** de CSS selecciona el elemento raíz de un árbol que representa el documento. En HTML, `:root` representa el elemento `<html>` y es idéntico al selector `html`, excepto que su especificidad es mayor.


```css
/\* Selecciona el elemento raíz del documento:
 <html> en el caso de HTML \*/
:root {
  background: yellow;
}
```

Sintaxis
--------

Error: could not find syntax for this itemEjemplo
-------

`:root` puede ser útil para declarar variables CSS globales:


```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

Especificaciones
----------------

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS Motion Path
===============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

**Motion Path** es un módulo CSS que permite animar cualquier objeto gráfico a lo largo de una ruta personalizada.

La idea es que cuando se deseaba animar un elemento que se movía a lo largo de un "path", anteriormente solo teniamos las propiedades de animación, posición, etc. a nuestra disposición, lo que no era ideal y solo permitía movimientos simples. Con `offset-path` (en-US) puedes definir un "path" específico de cualquier forma que se quiera. Luego se animará a lo largo de ese "path" animando `offset-distance` (en-US), y variar la rotación en algún punto usando `offset-rotate` (en-US).

Ejemplo básico
--------------


```html
<div id="motion-demo"></div>
```



```css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```

Referéncia
----------

### Propiedades

* `offset` (en-US)
* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)
Especificaciones
----------------

| Specification |
| --- |
| Motion Path Module Level 1 # offset-path-property |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::-webkit-progress-bar
======================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

El pseudo-elemento CSS **`::-webkit-progress-bar`** representa la barra entera del elemento `<progress>` . Normalmente sólo está visible a partir de la porción rellena de la barra ya que, por defecto se muestra debajo del pseudo-lemento `::-webkit-progress-value`. Es hijo del pseudo-elemento `::-webkit-progress-inner-element` y padre del pseudo-elemento `::-webkit-progress-value`.

**Nota:** para que `::-webkit-progress-value` tenga efecto , en el elemento `<progress>` `-webkit-appearance` (en-US) debe tener el valor *none*.

Ejemplo
-------

### Contenido CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}
```

### Contenido HTML


```html
<progress value="10" max="50"></progress>
```

### Resultado

Una barra de progreso que use el estilo indicado anteriormente será similar a la siguiente:

![](/es/docs/Web/CSS/::-webkit-progress-bar/progress-bar.png)

Especificaciones
----------------

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además
----------

* Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento `<progress>`:
    + `::-webkit-progress-value`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`
* `::-ms-fill`
:-moz-only-whitespace
=====================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La pseudo-class CSS `:-moz-only-whitespace` selecciona un elemento si no tiene ningún hijo, o bien nodos textos vacíos o bien nodos texto que sólo contienen espacios en blanco. Sólo cuando hay elementos o nodos texto con uno o más caracteres dentro, el elemento no será seleccionado por esta pseudo-clase.

Síntaxis
--------
```

span:-moz-only-whitespace { propiedades del estilo }
```

Ejemplo
-------

### CSS


```css
span:-moz-only-whitespace::before {
  background-color: lime;
}
```

### HTML


```html
<span> </span>
```
inset-inline-end
================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`inset-inline-end`** define la inserción final lógica en línea de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad `top`, `right`, `bottom`, o `left` dependiendo de la propiedad en los valores definidos para `modo de escritura`, `dirección` y `orientación de texto`.


```css
/\* <length> values \*/
inset-inline-end: 3px;
inset-inline-end: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-inline-end: 10%;

/\* Keyword value \*/
inset-inline-end: auto;

/\* Global values \*/
inset-inline-end: inherit;
inset-inline-end: initial;
inset-inline-end: unset;
```


|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | positioned elements |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

Sintaxis
--------

### Valores

La propiedad `inset-inline-end` toma los mismos valores de la propiedad `left`.

### Sintaxis formal
```

inset-inline-end =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Mira también
------------

* Las propiedades que definen otras inserciones:: `inset-block-start`, `inset-block-end`, y `inset-inline-start`
* Las propiedades físicas mapeadas: `top`, `right`, `bottom`, y `left`
* `writing-mode`, `direction`, `text-orientation`