diff options
Diffstat (limited to 'files/es/web/css/-moz-outline-radius/index.html')
| -rw-r--r-- | files/es/web/css/-moz-outline-radius/index.html | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/files/es/web/css/-moz-outline-radius/index.html b/files/es/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..01370818bb --- /dev/null +++ b/files/es/web/css/-moz-outline-radius/index.html @@ -0,0 +1,158 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>En aplicaciones de Mozilla como Firefox, la propiedad CSS <code>-moz-outline-radius</code> puede ser usada para a los contornos de esquinas redondeadas. Un {{cssxref("outline")}} es una línea que es dibujada alrededor de los elementos, fuera del límite del borde, para hacer que el elemento destaque.</p> + +<p><code>-moz-outline-radius</code> es un atajo para establecer las cuatro propiedades{{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} y {{cssxref("-moz-outline-radius-bottomleft")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Un valor */ +-moz-outline-radius: 25px; + +/* Dos valores */ +-moz-outline-radius: 25px 1em; + +/* Tres valores */ +-moz-outline-radius: 25px 1em 12%; + +/* Cuator valores */ +-moz-outline-radius: 25px 1em 12% 4mm; + +/* valores globales */ +-moz-outline-radius: inherit; +-moz-outline-radius: initial; +-moz-outline-radius: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<div class="note">Los contornos elípticos y los valores <code><porcentaje></code> se expresan de acuerdo a la síntaxis descrita en {{cssxref("border-radius")}}.</div> + +<p>Uno, dos,tres o cuatro valores <code><outline-radius></code> , representan uno de los siguientes casos:</p> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Ver {{cssxref("<length>")}} para ver los posibles valores.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Un {{cssxref("<percentage>")}}; ver {{cssxref("border-radius")}} para más detalles.</dd> +</dl> + +<ul> + <li>Si se establece un único valor se aplica a las cuatro esquinas-</li> + <li>Si se establecen dos valores, el primero se aplica a la esquina superior-izquierda e inferior-derecha y el segundo a las esquinas superior-derecha e inferior-izquierda</li> + <li>Si se establecen tres valores el primero se aplica a la esquina superior-izquierda, el segundo a las esquinas superior-derecha e inferior-izquierda y el tercero a la esquina inferior-derecha.</li> + <li>Si se establecen cautro valores el primero se aplica a la esquina superior-izquierda, el segundo a la esquina superior-derecha, el tercero la esquina inferior-derecha y el cuarto a la esquina inferior-izquierda.</li> +</ul> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><style> +p { +border: 1px solid black; <code class="language-css"><span class="property token"> +outline</span><span class="punctuation token">:</span> dotted red<span class="punctuation token">;</span> <span class="property token">-moz-outline-radius</span><span class="punctuation token">:</span> <span class="number token">12%</span> <span class="number token">1</span>em <span class="number token">25</span>px<span class="punctuation token">;</span></code> +} +</style> </head> + +<body> <p>La propiedad outline-style usando <code class="language-css"><span class="property token">-moz-outline-radius</span></code></p> </body> + +<head> <style> +p1 { +border: 1px solid black; <code class="language-css"><span class="property token">outline</span><span class="punctuation token">:</span> dotted red<span class="punctuation token">; </span></code><code class="language-css"><span class="property token"> +-moz-outline-radius-topleft</span><span class="punctuation token">:</span> <span class="number token">12%</span><span class="punctuation token">;</span> <span class="property token"> +-moz-outline-radius-topright</span><span class="punctuation token">:</span> <span class="number token">1</span>em<span class="punctuation token">;</span> <span class="property token"> +-moz-outline-radius-bottomright</span><span class="punctuation token">:</span> <span class="number token">35</span>px<span class="punctuation token">;</span> <span class="property token"> +-moz-outline-radius-bottomleft</span><span class="punctuation token">:</span> <span class="number token">1</span>em<span class="punctuation token">;</span></code> } +</style> </head> + +<body> <p1>La propiedad outline-style usando un <code class="language-css"><span class="property token">-moz-outline-radius-xxx más complicado</span></code></p1> </body> +</pre> + +<h3 id="Result"><strong>Result</strong></h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-outline-radius') }}</p> + +<h2 id="Notas">Notas</h2> + +<ul> + <li><code>Las esquinas con radio dotted</code> o <code>dashed</code> se muestran como solid, {{bug("382721")}}</li> + <li>Existe la posibilidad de que futuras versiones del motor Gecko/Firefox eliminen esta propiedad completamente. Ver {{bug("593717")}}.</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad no se define es ningún estándar CSS.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> |