阴影(box-shadow)
Box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影;
里面只有水平阴影和垂直阴影是必须的。其他的可以省略有默认值。
默认的外阴影 outset 不能写,写上就看到效果
伪元素
Before after 两个 伪元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>iphone手机壳</title>
<style>
.iphone{
width:300px;
height:600px;
background-color:#2e2e2e;
margin:50px auto;
border:10px solid #3b3b3b;
border-radius:30px;
box-shadow:5px 5px 5px rgba(0,0,0,0.5);
position:relative;
}
.iphone::before{
content:"";
width:66px;
height:6px;
background-color:#2e2e2e;
position:absolute;
top:-16px;
right:60px;
border-radius:3px 3px 0 0;
}
.iphone::after{
content:"";
position:absolute;
width:6px;
height:45px;
background-color:#2e2e2e;
border-radius:3px 3px 0 0;
left:-16px;
top:100px;
}
.light{
width:8px;
height:8px;
border:3px solid #4a4a4a;
background-color:#1a1a1a;
border-radius:50%;
margin:10px auto;
margin-top:30px;
box-shadow:2px 2px 2px rgba(0,0,0,0.5);
}
.speaker{
width:70px;
height:5px;
border:3px solid #4a4a4a;
background-color:#1a1a1a;
border-radius:16px;
margin:0px auto;
box-shadow:2px 2px 2px rgba(0,0,0,0.5);
}
.content{
width:270px;
height:450px;
background-color:#0a0a0a;
margin: 20px auto 0;
border-radius:10px;
border:4px solid #1a1a1a;
color:#fff;
text-align:center;
font:35px/450px "微软雅黑";
}
.home{
width:50px;
height:50px;
border-radius:50%;
background-color:#1a1a1a;
margin:8px auto;
position:relative;
}
.home::before{
content:"";
width:20px;
height:20px;
position:absolute;
border-radius:3px;
top:14px;
left:14px;
border:2px solid #fff;
}
</style>
</head>
<body>
<div class="iphone">
<div class="light"></div>
<div class="speaker"></div>
<div class="content">iphone8</div>
<div class="home"></div>
</div>
</body>
</html>