A veces necesitamos un elemento que no tenga sombra, aunque inicialmente no hay ningún elemento que tenga box-shadow . A veces, algún otro desarrollador ha diseñado un elemento que tiene la propiedad box-shadow , pero desea que no tenga sombras.
En este artículo, veremos cómo eliminar la sombra de cuadro de un elemento en CSS.
Sintaxis:
box-shadow: none;
Ejemplo: El siguiente ejemplo muestra un botón que contiene una propiedad box-shadow .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Button with box-shadow</title>
<style>
#btn {
padding: 10 20;
background: transparent;
box-shadow: 1px 1px 1px 1px red;
}
</style>
</head>
<body>
<button id="btn"> Click me</button>
</body>
</html>
Producción:
Ejemplo 2: el siguiente ejemplo muestra un botón después de eliminar la propiedad box-shadow .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Button without box-shadow</title>
<style>
#btn {
padding: 10 20;
background: transparent;
box-shadow: none;
}
</style>
</head>
<body>
<button id="btn"> Click me</button>
</body>
</html>
Producción:
sin sombra
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA