Difference between -webkit-box-shadow & box-shadow in CSS
Last Updated :
26 Apr, 2021
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.
Box-shadow: The box-shadow property in CSS is used to apply a box-shadow. The box-shadow is the CSS standard implementation.
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:
Share your thoughts in the comments
Please Login to comment...