Home > Article > Web Front-end > How to set the shadow of horizontal lines in css
How to set the shadow of horizontal lines in css
- WBOYOriginal
- 2021-12-08 16:49:553251browse
How to set the horizontal line shadow in css: 1. Add the "width: horizontal line length value; height: horizontal line thickness value; background: horizontal line color" style to the element to draw the horizontal line; 2. Add the horizontal line Add the "box-shadow: horizontal shadow position and vertical shadow position;" style to the line element to set the shadow of the horizontal line element.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to set the shadow of horizontal lines in css
In the previous article "How to use css to draw horizontal and vertical lines "In "We talked about how to draw horizontal lines through CSS, let's take a look at how to add shadows to horizontal lines.
In CSS, you can use the box-shadow attribute to set the shadow of the horizontal line. The box-shadow attribute adds one or more shadows to the box.
The syntax is:
box-shadow: h-shadow v-shadow blur spread color inset;
Among them:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:200px;
height:3px;
background-color:#000;
box-shadow: 10px 5px 5px #888888;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>Output result:
css video tutorial)
The above is the detailed content of How to set the shadow of horizontal lines in css. For more information, please follow other related articles on the PHP Chinese website!