阴影

盒阴影

box-shadow 向框添加一个或多个阴影。

xxxxxxxxxx
box-shadow: h-shadow v-shadow blur spread color inset;

xxxxxxxxxx
<div class="box"></div>

xxxxxxxxxx
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px green;
}

给阴影添加一个模糊效果

xxxxxxxxxx
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px 5px green;
}

三个方向的阴影效果

xxxxxxxxxx
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

内阴影效果

xxxxxxxxxx
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 0 0 30px rgba(0,0,0,.5) inset;
}

字阴影

text-shadow 属性向文本设置阴影

xxxxxxxxxx
text-shadow: h-shadow v-shadow blur color;

xxxxxxxxxx
<h1>我是标题</h1>

xxxxxxxxxx
h1 {
    font-size: 30px;
    text-shadow: 5px 5px 5px #FF0000;
}

实时效果反馈

1.完成一个水平垂直阴影位置为0，模糊度为10px，放大5px，颜色为黑色半透明：

A box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);

B box-shadow: 0px 0px 10px rgba(0,0,0,0.5);

C box-shadow: 0px 0px 10px 5px #000;

D box-shadow: 0px 10px 10px rgba(0,0,0,0.5);

答案

1=>A