Home >Web Front-end >Front-end Q&A >How to add shadow in css

How to add shadow in css

藏色散人
藏色散人Original
2021-04-19 14:39:193025browse

In CSS, you can set one or more drop-down shadow boxes through the "box-shadow" attribute. The syntax is such as "box-shadow: h-shadow v-shadow blur spread color inset;". The attribute is a comma separated list of shades.

How to add shadow in css

The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.

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

默认值:none
继承:no
版本:CSS3
JavaScript 语法:object.style.boxShadow="10px 10px 5px #888888"

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.

值 
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影(开始时)改变阴影内侧阴影

[Recommended learning: css video tutorial]

Code example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Effect:

How to add shadow in css

The above is the detailed content of How to add 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