阴影box-shadow
CSS3的box-shadow属性用法详解:
首先从名称开始进行理解，box-shadow能够分解为两部分:
（1）.box:表示一个盒子，也就是我们说的一个元素，比如div之类。
（2）.shadow:投影的意思。
那么这个属性就是来设置元素的投影效果的。
本章节通过代码实例介绍一下box-shadow属性的用法。
语法结构如下:
box-shadow:h-shadow v-shadow blur spread color inset;
参数解释:
1.h-shadow:必需，设置元素阴影水平偏移量，可以为负值，单位是像素。
2.v-shadow:必需，设置元素阴影垂直偏移量，可以为负值，单位是像素。
3.blur:可选，阴影模糊半径，只能够为正值，如果为0，表示不具有模糊效果，单位像素。
4.spread:可选，阴影的扩展半径尺寸，可以为负值，单位是像素。
5.color:可选，如果省略此参数，那么浏览器会选取默认色，各个浏览器的默认是会不同，有的为透明，它设置阴影的颜色。
6.inset:可选，可以将外部阴影改为内部阴影。
代码实例:
实例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上代码只设置了阴影的水平和垂直偏移量，并没有模糊效果，同时没有设置阴影的颜色，那么浏览器就会选取默认颜色，各个浏览器之间会有所不同，有的是黑色，有的是透明，不建议缺省此属性。
实例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上代码设置了div的阴影偏移量和阴影的颜色。
实例三
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上代码设置了div阴影的水平和垂直偏移量、模糊半径和阴影的颜色。
实例四:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上代码设置了div阴影的水平和垂直偏移量、模糊半径、阴影扩展半径和阴影的颜色。
实例五:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上代码可以给div设置为内阴影，并且设置了其他参数。
实例六:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
![Front-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Nullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB-Frontend-Tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Praktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
