Difference between -webkit-box-shadow & box-shadow in CSS
In this article, we will find difference between ‘webkit-box-shadow’ & ‘box-shadow’ in CSS.
Webkit-box-shadow: The webkit-box-shadow property in CSS is used to apply a box-shadow. The webkit-box-shadow is a browser-specific implementation for WebKit browsers like Google Chrome and Safari.
- Syntax:
webkit-box-shadow: h-offset v-offset blur;
- Advantage: If we use -webkit-box-shadow the old versions of browsers support it.
Box-shadow: The box-shadow property in CSS is used to apply a box-shadow. The box-shadow is the CSS standard implementation.
- Syntax:
box-shadow: h-offset v-offset blur;
- Advantage: If we use box-shadow latest versions of browsers support it.
There are some differences between box-shadow and -webkit-box-shadow properties which are following:
| Box-shadow | Webkit-box-shadow |
| The box-shadow is the CSS standard implementation. | While the webkit-box-shadow is a browser-specific implementation for WebKit Browsers like Google Chrome and Safari. |
| The box-shadow property is for the latest versions. | Whereas the webkit-box-shadow property is used for older versions. |
Example:
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> |
Output:
Please Login to comment...