Home > Article > Web Front-end > How to set div shadow in css

How to set div shadow in css

青灯夜游Original: 2021-05-12 13:47:0428637browse

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:

How to set div shadow in css

##Description:

The box-shadow property can set one or more drop-down shadow boxes.

Syntax

box-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.

ValueDescription##h-shadowv-shadowblur#spread#colorinsetLearning video sharing:


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)

css video tutorial

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to improve css performanceNext article：How to improve css performance

See more

How to set div shadow in css

Related articles