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{
    width:600px;
    height:300px;
    margin:0 auto;
}

.left{
    width:20%;
    height:100%;
    float:left;
    background-color:#FFD266;
}
.center{
    position:absolute;
    width: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{
    width: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一个绝对定位，再调整一下位置，整个左右阴影就出来了。

posted on 2020-11-07 11:42 bell_* 阅读(540) 评论(0) 编辑收藏举报