关闭

圆角矩形、阴影、伪元素的应用实例iphone手机壳

169人阅读 评论(0) 收藏 举报
分类:

阴影(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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:42698次
    • 积分:1056
    • 等级:
    • 排名:千里之外
    • 原创:53篇
    • 转载:14篇
    • 译文:19篇
    • 评论:0条
    文章分类