四、box-shadow属性
box-shadow——阴影
box-shadow:3px 3px 3px 3px #f00 inset;
box-shadow的各个属性值的说明：水平阴影、垂直阴影、羽化值、阴影大小、阴影颜色、阴影类别[内阴影][外阴影]
作业
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>iPhone</title>
<style type="text/css">
.iphone {
width:250px;
height:450px;
background:#2e2e2e;
margin:60px auto;
border:10px solid #3b3b3b;
border-radius:20px;
position:relative;
}
.iphone:before {
content:"";
width:50px;
height:10px;
background:#2e2e2e;
display:block;
position:absolute;
top:-18px;
right:25px;
border-radius:3px;
}
.iphone:after {
content:"";
width:10px;
height:50px;
background:#2e2e2e;
display:block;
position:absolute;
top:40px;
left:-18px;
border-radius:3px;
}
.cam {
width:10px;
height:10px;
border-radius:50%;
border:3px solid #4a4a4a;
position:absolute;
top:10px;
left:48%;
}
.headphone {
width:50px;
height:4px;
border-radius:50px;
border:3px solid #4a4a4a;
position:absolute;
top:30px;
left:40%;
}
.screen {
width:240px;
height:330px;
background:#0a0a0a;
position:absolute;
top:60px;
left:5px;
}
.home {
width:50px;
height:50px;
border-radius:50%;
background:#0a0a0a;
position:absolute;
bottom:5px;
left:40%;
}
.aj {
width:25px;
height:25px;
border-radius:5px;
border:3px solid white;
position:absolute;
bottom:10px;
left:18%;
}
</style>
</head>
<body>
<div class="iphone">
<div class="cam"></div>
<div class="headphone"></div>
<div class="screen"></div>
<div class="home">
<div class="aj"></div>
</div>
</div>
</body>
</html>
