CSS的z-index属性和box-shadow属性

CSS的z-index属性和box-shadow属性
CSS的z-index属性和box-shadow属性

z-index

z-index属性设置元素的堆叠顺序，z-index的取值表示各元素之间的层次关系，值大者在上，当为负数时表示该元素位于页面之下
- 重点！！！
z-index仅能在定位元素上奏效，如：position：absolute；

box-shadow
- box-shadow属性，向框添加一个或多个阴影
  
  语法：
```
box-shadow: h-shadow v-shadow blur spread color inset；
```
  - h-shadow：必须，水平阴影的位置，允许负值
  - v-shadow：必须，垂直阴影的位置，允许负值
  - blur：可选，模糊距离(模糊半径)
  - spread：可选，阴影的尺寸（扩张半径）
  - color：可选，阴影的颜色
  - inset：可选，将外部阴影改为内部阴影
- 只能有一个box-shadow属性，但是一个属性里可以有多个阴影，用逗号隔开。
- 然后就可以根据它的属性设置各种各样的阴影，如左阴影，右阴影，左右阴影，上下阴影等就不具体展示了
- 原本以为这个属性只能做一些简单的小背景，但是还是我太憨了，发现它可以做出许多许多的东西，边框，半透明遮罩层，甚至可以做立体投影，彩色投影等。这些就等我学习了之后再写写。
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="test_css.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="box">
        <div class="left">
            <h2>left</h2>   
        </div>
        <div class="center">
            <h2>center</h2>
        </div>
        <div class="right">
            <h2>right</h2>
        </div>
    </div>
</body>
</html>
```
```
/* CSS Document */
.box{
    600px;
    height:300px;
    margin:0 auto;
}

.left{
    20%;
    height:100%;
    float:left;
    background-color:#FFD266;
}
.center{
    position:absolute;
    360px;
    height:300px;
    background-color:#FFFFFF;
    box-shadow:20px 0 20px -20px #000,-20px 0 20px -20px #000;
    z-index:1;
    margin-left:120px;
}

.right{
    20%;
    height:100%;
    float:right;
    background-color:#68B4FF;
}
```
box-shadow: h-shadow v-shadow blur spread color inset;由于阴影是左右阴影，所以只要给h-shadow水平阴影，而垂直阴影为0，但是因为只能有一个box-shadow，所以设置完一个阴影后逗号隔开再设置一个阴影。但是由于层次关系，有一边的阴影会被挡住，所以要用z-index使main到上面来，但是发现还是不行，查阅后发现z-index只能在定位元素上奏效，于是给main一个绝对定位，再调整一下位置，整个左右阴影就出来了。
相关阅读:
git线上操作
 IDEA快捷方式
 Java 四种线程池
 java 获取当前天之后或之前7天日期
 如何理解AWS 网络，如何创建一个多层安全网络架构
 申请 Let's Encrypt 通配符 HTTPS 证书
 GCE 部署 ELK 7.1可视化分析 nginx
使用 bash 脚本把 AWS EC2 数据备份到 S3
使用 bash 脚本把 GCE 的数据备份到 GCS
nginx 配置 https 并强制跳转(lnmp一键安装包)
原文地址：https://www.cnblogs.com/bell-ld/p/13940471.html