CSS Drop Shadow
CSS Drop Shadow
In web design, drop shadow effect is a common design technique that can add a sense of three-dimensionality and layering to elements. In CSS, we can use the box-shadow property to achieve a shadow effect. This article will introduce the relevant knowledge of CSS shadow in detail and provide multiple sample codes for reference.
1. Basic Syntax
box-shadow property is used to add a drop shadow effect to an element. Its basic syntax is as follows:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: Horizontal offset, which can be positive (to the right) or negative (to the left).v-shadow: Vertical offset, which can be positive (downward) or negative (upward).blur: Blur radius. A larger value results in a blurrier shadow.spread: Shadow size, which can be positive (expanding the shadow) or negative (shrinking it).color: Shadow color. You can use a color value or keyword.inset: Optional value, indicating an inner shadow.
2. Example Code
2.1 Adding a Simple Drop Shadow
<!DOCTYPE html>
<html Tutorial">html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Box Shadow</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, we add a div A simple drop shadow effect is added to the element, with a 5px offset to the bottom right, a 10px blur radius, and a color of #888888.
2.2 Add inner shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inset Box Shadow</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: inset 5px 5px 10px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, we add an inner shadow effect to a div element. The drop shadow is offset 5px to the bottom right, has a blur radius of 10px, and uses the color #888888.
2.3 Multiple projection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Box Shadows</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px #888888, -5px -5px 10px #cccccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, we add multiple drop shadow effects to a div element, offset 5px to the lower right and upper left, with a blur radius of 10px and colors of #888888 and #cccccc respectively.
2.4 Blurred projection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blur Box Shadow</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 5px 5px 20px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, we add a drop shadow effect to a div element. The drop shadow is offset 5px to the bottom right, has a blur radius of 20px, and uses the color #888888.
2.5 Expand projection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spread Box Shadow</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px 10px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the above example, we added an expanding drop shadow effect to a div element. The drop shadow is offset 5px to the lower right, has a blur radius of 10px, a size of 10px, and a color of #888888.
3. Summary
Through this article, we learned how to implement drop shadow effects in CSS and provided several sample code examples for reference. Drop shadow effects can add a sense of depth and depth to web page elements and are a common technique in web design.