How to set div shadow in css-CSS Tutorial-php.cn

How to set div shadow in css

青灯夜游

Release： 2023-01-06 11:12:34

Original

28636 people have browsed it

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.

How to set div shadow in css

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>

Copy after login

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;

Copy after login

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!