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: