标签：CSS3 绘制 height iPhone background 10px margin btn border

Tips：当你看到这个提示的时候，说明当前的文章是由原emlog博客系统搬迁至此的，文章发布时间已过于久远，编排和内容不一定完整，还请谅解`

用CSS3绘制iPhone手机

日期：2017-7-3 阿珏 css 浏览：1825次 评论：1条

先上 效果图，先睹为快。(这绝对不是一张图片。恩~这话怎么怪怪的~)

不要问我iPhone几 ，因为我也不知道，没用过，你懂得。

css样式部分

#phone{
	width:250px;
	height:500px;
	background-color:#2E2E2E;
	border:10px solid #3B3B3B;
	margin:100px auto;
	border-radius:30px;/*设置div元素的圆角边框*/
}
camera{
width:8px;
height:8px;
background-color:#1A1A1A;
border-radius:50%;
border:2px solid #505050;
margin:10px auto;/*距离上边距10px 左右居中*/

}
receiver{
width:80px;
height:8px;
border:2px solid #505050;
margin:10px auto;
border-radius:10px;
background-color:#1A1A1A;

}
screen{
width:225px;
height:385px;
background-color:#0A0A0A;
border:3px solid #1C1C1C;
margin:10px auto;

}
btn{
width:40px;
height:40px;
background:#1A1A1A;
border-radius:50%; /*当宽高相同时，则为圆*/
margin:10px auto;

}
/:before 选择器在被选元素的内容前面插入内容。/
btn:before{
width:22px;
height:22px;
border:2px solid white;
border-radius:30%;
content:""; /*即使插入的内容为空也需要写，否则不显示*/
display:inline-block;
margin-top:7px;
margin-left:7px;

}

HTML部分

<div id="phone">
	<div id="camera"></div><!-- 摄像头部分-->
	<div id="receiver"></div><!--听筒部分-->
	<div id="screen"></div><!--屏幕部分-->
	<div id="btn"></div><!--按钮部分-->
</div>

晚些我又加了点玩意上去

点击Home键可以让手机亮屏，5秒后又再次熄灭屏幕

亮屏状态的效果图，当然中间那张是图片了(我手机)

JavaScript部分

在按钮部分的div处绑定onclick事件，调用下面的函数;

var btn_obj = document.getElementById("screen");
function btn(){
	btn_obj.style.background = "url(1.jpg)";
	btn_obj.style.backgroundSize = "225px 385px";
	setTimeout("black()",5000);
}
function black(){

btn_obj.style.background = "none";

btn_obj.style.backgroundColor = "#0A0A0A";

}

本博客所有文章 如无特别注明 均为原创。 作者： 阿珏 ， 复制或转载请 以超链接形式 注明转自 阿珏博客 。
原文地址《 用CSS3绘制iPhone手机 》

网友评论：

不朽千秋 3年前 (2018-05-19)
话说emlog文章那不是可以搞html代码的么？可以做个预览[#aru_53]

标签：CSS3,绘制,height,iPhone,background,10px,margin,btn,border
From： https://www.cnblogs.com/Ajue/p/18201773