WEB前端纯 CSS 画 iphone，网友：我卖一个肾来买你这台iPhone

怼烎@ 2022-01-29 09:17 193阅读 0赞

画iPhone小意思的啦！

![WEB前端纯 CSS 画 iphone，网友：我卖一个肾来买你这台iPhone][WEB_ CSS _ iphone_iPhone]

纯CSS画iPhone，话不多说上效果图！

![WEB前端纯 CSS 画 iphone，网友：我卖一个肾来买你这台iPhone][WEB_ CSS _ iphone_iPhone 1]

# 代码如下: #

# html: #

<div class="container">
     <div class="round"></div>
     <div class="longround"></div>
     <div class="screen">iphone 7plus</div>
     <div class="home"></div>
    </div>

下面是小编整理的一整套系统的web前端学习教程，加群即可免费领取！

自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

加Q 裙：853597293（招募中）

# css: #

<style type="text/css">
     .container {
     width: 300px;
     height: 600px;
     background-color: rgba(0, 0, 0, .6);
     margin: 50px auto;
     border-radius: 30px;
     box-shadow: 0 0 20px rgba(0, 0, 0, .5);
     position: relative;
     z-index: 999;
     }
     .container::before {
     content: "";
     width: 3px;
     height: 50px;
     background: rgba(0, 0, 0, .5);
     position: absolute;
     top: 170px;
     left: 300px;
     border-radius: 0 4px 4px 0;
     }
     .container::after {
     content: "";
     width: 3px;
     height: 100px;
     background: rgba(0, 0, 0, .5);
     position: absolute;
     top: 50px;
     left: 300px;
     border-radius: 0 4px 4px 0;
     }
     .container .round {
     width: 12px;
     height: 12px;
     border: 3px solid #4a4a4a;
     background-color: rgba(0, 0, 0, .6);
     border-radius: 50%;
     position: absolute;
     left: 50%;
     top: 10px;
     margin-left: -7.5px;
     }
     .container .longround {
     position: absolute;
     width: 100px;
     height: 8px;
     border: 3px solid #4a4a4a;
     background-color: rgba(0, 0, 0, .6);
     border-radius: 30px;
     position: absolute;
     left: 50%;
     margin-left: -50px;
     top: 35px;
     }
     .container .screen {
     width: 280px;
     height: 470px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, .8));
     position: absolute;
     top: 60px;
     left: 50%;
     margin-left: -140px;
     color: #fff;
     text-align: center;
     font-weight: bold;
     font-size: 20px;
     line-height: 450px;
     box-shadow: 0 0 10px rgba(0, 0, 0, .6) inset;
     }
     .container .screen::before {
     content: "";
     width: 50px;
     height: 4px;
     background: rgba(0, 0, 0, .5);
     border-radius: 3px 3px 0 0;
     position: absolute;
     top: -63px;
     left: 180px;
     }
     .container .screen::after {
     content: "";
     width: 7px;
     height: 10px;
     background: rgba(0, 0, 0, .5);
     border-radius: 5px 0 0 5px;
     position: absolute;
     top: -10px;
     left: -17px;
     }
     .container .home {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background-color: rgba(0, 0, 0, .6);
     border: 2px solid #4a4a4a;
     position: absolute;
     bottom: 10px;
     left: 50%;
     margin-left: -25px;
     box-shadow: 0 0 2px black inset;
     }
     .container .home::before {
     content: "";
     width: 25px;
     height: 25px;
     background-color: transparent;
     border: 2px solid rgba(255, 255, 255, .5);
     position: absolute;
     left: 10px; 
     top: 10px;
     }
    </style>

[WEB_ CSS _ iphone_iPhone]: http://p1.pstatp.com/large/pgc-image/e3f5164eabc14954a6d7f28269f127a6
[WEB_ CSS _ iphone_iPhone 1]: http://p1.pstatp.com/large/pgc-image/7b82f5973ccb427d85769096dfc14a72

发表评论取消回复

表情：

评论列表（有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS高级篇之纯CSS绘制iPhone界面

https://www.zubach.com/blog/how-i-made-an-iphone-4-in-css ![在这里插入图片描述][bc36006a3be5d1d

╰+攻爆jí腚メ/ 2024年04月01日 12:56/ 0 赞/ 19 阅读

相关那个割肾换iPhone的男生，现在怎么样了？

![format_png][] 昨天晚上iphone12发布，写了文章《[支持北斗、5G 的 Iphone12 来了，最大的槽点竟然是..》][5G _ Iphone12 _

系统管理员/ 2022年12月15日 11:10/ 0 赞/ 122 阅读

相关史上最强！iPhone12来了，网友：爷青回！

![format_png][] 等夏天，等秋天，终于等到了苹果发布会，不，准确来说，应该是，终于等到了iPhone 12。是的，这一次，它真的来了。没有苹果最核

雨点打透心脏的1/2处/ 2022年12月15日 11:09/ 0 赞/ 147 阅读

相关 android 换iphone,Android死忠粉为啥换iPhone？这理由我服

目前，苹果和谷歌都推出允许用户将数据从对方平台转移到自家平台的应用工具。但是，对于一个普通的消费者来说，让他们改用另一个平台的原因是什么呢？我们来看看外媒PhoneArena的

àì夳堔傛蜴生んèń/ 2022年10月05日 01:54/ 0 赞/ 56 阅读

相关用纯css画一个小企鹅

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

灰太狼/ 2022年08月29日 12:52/ 0 赞/ 165 阅读

相关如何开发或者迁移iphone 来适应iphone 5 手机屏幕？

新的iPhone6采用了一个新的长宽比和新的分辨率（640×1136像素）。如何让现有的app适应这个屏幕尺寸如何才能然搞一个app适应不同的屏幕分辨率呢？不用每次都调

ゝ一世哀愁。/ 2022年08月06日 04:09/ 0 赞/ 153 阅读

相关 iPhone5发布新意不多网友失望

　　万众期待的iPhone5正式亮相,与之前市场传闻如出一辙,没有太多新意：4寸大屏幕､超薄机身､支援4GLTE网络,同时升级操作系统至iOS6｡很多网友连夜关注，结果很多人表

女爷i/ 2022年05月28日 04:36/ 0 赞/ 87 阅读

相关如何用纯 CSS 创作一张 iPhone 价格信息图

效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [https://codepen.io/comehope

女爷i/ 2022年04月05日 04:44/ 0 赞/ 103 阅读

相关 WEB前端纯 CSS 画 iphone，网友：我卖一个肾来买你这台iPhone

画iPhone小意思的啦！ ![WEB前端纯 CSS 画 iphone，网友：我卖一个肾来买你这台iPhone][WEB_ CSS _ iphone_iPhone] 纯CS

怼烎@/ 2022年01月29日 09:17/ 0 赞/ 194 阅读

相关 CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX

/iPhone6和iPhone8/ @media only screen and (device-width : 375px)

约定不等于承诺〃/ 2022年01月15日 01:37/ 0 赞/ 154 阅读