The first length is the horizontal offset, the second length is the vertical offset, the third length is the blur radius, and the fourth length is the spread distance.
object.style.boxShadow = "value"; <'box-shadow'> = none | <shadow># none Specifies no shadows.
<shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset? <color> Specifies the color using a keyword or a numerical specification.
<length> Specifies the length using a number followed by a unit of measurement.
1st specifies the horizontal offset. A positive value draws the shadow to the right and a negative value draws the shadow to the left.
2nd specifies the vertical offset. A positive value draws the shadow to the bottom and a negative value draws the shadow to the top.
3rd specifies the blur radius. Negative values are not allowed.
4th specifies the spread distance. A positive value causes the shadow to expand and a negative value causes the shadow to contract.
inset Changes the drop shadow from an outer box-shadow to an inner box-shadow.
<!doctype html>
<html>
<head>
<style>
p
{
background-color: lightgray;
box-shadow: red 10px 10px;
margin: 10px;
}
</style>
</head>
<body>
<p>color</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: lightgray;
box-shadow: 10px 0;
margin: 10px;
}
</style>
</head>
<body>
<p>horizontal</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: lightgray;
box-shadow: 10px 10px inset;
margin: 10px;
}
</style>
</head>
<body>
<p>inset</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: lightgray;
box-shadow: none;
margin: 10px;
}
</style>
</head>
<body>
<p>none</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: lightgray;
box-shadow: 0 0 0 10px;
margin: 10px;
}
</style>
</head>
<body>
<p>spread</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: lightgray;
box-shadow: 0 10px;
margin: 10px;
}
</style>
</head>
<body>
<p>vertical</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: lightgray;
margin: 10px;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(value)" value="0 0 10px">blur</button>
<button onmouseover="myfunction(value)" value="red 10px 10px">color</button>
<button onmouseover="myfunction(value)" value="10px 0">horizontal</button>
<button onmouseover="myfunction(value)" value="10px 10px inset">inset</button>
<button onmouseover="myfunction(innerHTML)">none</button>
<button onmouseover="myfunction(value)" value="0 0 0 10px">spread</button>
<button onmouseover="myfunction(value)" value="0 10px">vertical</button>
<p>box-shadow</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.boxShadow = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: lightgray;
margin: 10px;
}
</style>
</head>
<body>
<button>initial</button>
<button value="0 0 10px">blur</button>
<button value="red 10px 10px">color</button>
<button value="10px 0">horizontal</button>
<button value="10px 10px inset">inset</button>
<button>none</button>
<button value="0 0 0 10px">spread</button>
<button value="0 10px">vertical</button>
<p>box-shadow</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.boxShadow = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>