Las barras de progreso se utilizan para mostrar el progreso de un proceso. La sombra de cuadro con estilo de barra de progreso resalta el progreso del usuario de una tarea/proceso con efecto de sombra de cuadro.
Sintaxis:
<td style="box-shadow: px px px px rgba()"></td>
Valor devuelto: Devuelve la sombra del cuadro con estilo de barra de progreso.
Ejemplo 1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1 style="text-align:center;color:green;"> GeeksforGeeks </h1> <table> <tr> <td style= "box-shadow: 4px 2px 2px 5px rgba(0, 255, 0, 0.3);"> <span style="font-size:15px; color:green"> GeeksforGeeks </span> </td> </tr> <tr> <td style= "box-shadow:23px 1px 16px rgba(0, 255, 0, 0.3);"> <span style="font-size:35px; color:green"> GeeksforGeeks </span> </td> </tr> </table> </div> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
td {
background: repeating-linear-gradient(
70deg, green 0 10px, lightgreen 10px 20px) 0 0/100% 100% no-repeat;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center;color:green;">
GeeksforGeeks
</h1>
<table>
<tr>
<td style="
box-shadow: 1px 2px 2px 5px rgba(0, 255, 0, 0.3);
background-size:20% 100%;">
<span style="font-size:30px "> 20%</span>
</td>
</tr>
<tr>
<td style="
box-shadow: 4px 2px 2px 5px rgba(0, 255, 0, 0.3);
background-size:80% 100%;">
<span style="font-size:50px; "> 80%</span>
</td>
</tr>
</table>
</div>
</body>
</html>
Producción:
Compatibilidad con navegadores: Navegadores que admiten la sombra de cuadro con estilo de barra de progreso:
- explorador de Internet
- Google Chrome
- Ópera
- Firefox
- Safari
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA