Home >Web Front-end >CSS Tutorial >How to set div shadow in css
In CSS, you can use the box-shadow attribute to set the div shadow. You only need to add the "box-shadow: horizontal shadow value vertical shadow value blur distance shadow size shadow color inset;" style to the div element. That is Yes; the "inset" value can be omitted, it sets the inner shadow.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css set div shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
##Description:
The box-shadow property can set one or more drop-down shadow boxes. Syntaxbox-shadow: h-shadow v-shadow blur spread color inset;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.
| Description | |
|---|---|
| Required. The position of the horizontal shadow. Negative values allowed | |
| Required. The position of the vertical shadow. Negative values allowed | |
| Optional. Fuzzy distance | |
| Optional. The size of the shadow | |
| is optional. The color of the shadow. | |
| Optional. Change the shadow to the inner shadow from the outer shadow (at the beginning) |
The above is the detailed content of How to set div shadow in css. For more information, please follow other related articles on the PHP Chinese website!