Home >Daily Programming >CSS Knowledge >How to achieve single-sided shadow effect in css
How to achieve single-sided shadow effect in css
- 藏色散人Original
- 2018-11-12 17:28:0311991browse
This article mainly introduces to you the specific implementation method of HTML/css single-sided shadow.
For beginners of HTML/css, everyone must have a certain understanding of the border shadow effect. Appropriate use of single-sided shadow effects can make our web page content richer and more beautiful. So in the previous article, I also introduced to you the implementation method of css3 border shadow effect.
Recommended reference study: "CSS Tutorial"
In this section, we will introduce to you in detail the implementation of the html/css single border shadow effect!
html/css code example to implement single border shadow is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML/css实现单边框阴影实例</title>
</head>
<style type="text/css">
.box-shadow {
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
}
.top {
box-shadow: 0 -2px 0 red;
}
.right {
box-shadow: 2px 0 0 green;
}
.bottom {
box-shadow: 0 2px 0 blue;
}
.left {
box-shadow: -2px 0 0 orange;
}
</style>
<body>
<div class="box-shadow top"></div>
<div class="box-shadow right"></div>
<div class="box-shadow bottom"></div>
<div class="box-shadow left"></div>
</body>
</html>The front-end access effect is as follows:
1. Top border shadow :
2. Right border shadow:
3 .Lower border shadow effect:
4. Left border shadow effect:
The shadow effects of the single border around are displayed as shown above.
Then to implement border shadow, the main style attributes used are:
box-shadow attribute, which means adding one or more shadows to the box.
The first parameter represents the position of the horizontal shadow, the second parameter represents the position of the vertical shadow, the third parameter represents the blur distance, and the fourth parameter is the color of the shadow.
Note: The boxShadow property adds one or more drop-down shadows to the box. This property is a comma-separated list of shades, each shade specified by 2-4 length values, an optional color value, and an optional inset keyword. The value for omitted length is 0.
This article is an introduction to the method of achieving single border shadow effect in html/css. It is very simple and easy to understand. I hope it will be helpful to friends in need!
The above is the detailed content of How to achieve single-sided shadow effect in css. For more information, please follow other related articles on the PHP Chinese website!