-
-
Note: The horizontal and vertical shadow positions allow negative values
h-shadow required. The location of the horizontal shadow. Allow negative values for
v-shadow required. The location of the vertical shadow. Allow negative values to
be optional. Blur distance
spread is optional. The size of the shadow is
optional. The color of the shadow.
inset is optional. Change the inner shadow of the shadow from the outer shadow (at the beginning)
box-shadow: 10px 10px 5px 10px # 888888 inset;
Short form:
The specific implementation code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
margin: 40px auto;
text-align: center;
}
.box p{
font-size: 40px;
color: #e6c9c9;
text-shadow: -4px 0px 1px #000;
}
.shadow{
background-color: #eee;
width: 200px;
height: 200px;
margin: 20px auto;
box-shadow: 0px 0px 10px #bd9c9c;
}
</style>
</head>
<body>
<div class="box">
<p> Text shadow properties </ p>
<div class="shadow">
</div>
</div>
</body>
</html>
If you feel helpful to yourself, please pay attention to it and you will always share your knowledge. Thank you! ! !