En este artículo, encontraremos la diferencia entre ‘webkit-box-shadow’ y ‘box-shadow’ en CSS.
Webkit-box-shadow: la propiedad webkit-box-shadow en CSS se usa para aplicar una sombra de cuadro. Webkit-box-shadow es una implementación específica del navegador para navegadores WebKit como Google Chrome y Safari.
- Sintaxis:
webkit-box-shadow: h-offset v-offset blur;
- Ventaja: si usamos -webkit-box-shadow, las versiones antiguas de los navegadores lo admiten.
Box-shadow: la propiedad box-shadow en CSS se usa para aplicar una sombra de cuadro. El box-shadow es la implementación estándar de CSS.
- Sintaxis:
box-shadow: h-offset v-offset blur;
- Ventaja: si usamos box-shadow, las últimas versiones de los navegadores lo admiten.
Hay algunas diferencias entre las propiedades box-shadow y -webkit-box-shadow que son las siguientes:
| Sombra de la caja | Webkit-caja-sombra |
| El box-shadow es la implementación estándar de CSS. | Mientras que webkit-box-shadow es una implementación específica del navegador para navegadores WebKit como Google Chrome y Safari. |
| La propiedad box-shadow es para las últimas versiones. | Mientras que la propiedad webkit-box-shadow se usa para versiones anteriores. |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.gfg1{
color: green;
cursor: zoom-in;
border: solid 2px red;
margin: 10% 30%;
width: 50%;
box-shadow: 5px 10px 18px red;
-webkit-box-shadow: 5px 10px 18px red;
}
</style>
</head>
<body>
<div class="gfg1">
<h1>GeeksforGeeks</h1>
<p>box-shadow</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA