CSS 画 iPhone XR_前端仿iphonexr手机边框样式-程序员宅基地

技术标签: css  前端  css3  

闲来无事,用CSS简单实现 iPhone XR 低仿图

source-code底部自取;
效果图如下:
CSS 画 iPhone XR

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iPhone</title>
    <style>
        body {
   
    
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh
        }

        html {
   
    
            margin: 0;
            padding: 0
        }

        .box {
   
    
            /* flex:1 */
            width: 82.8px;
            height: 197.2px;
            background-color: #eee;
            border: 3px solid #333;
            margin: 1px;
            position: relative;
            border-radius: 12px;
        }

        .border {
   
    
            display: flex;
            justify
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41777791/article/details/106433681

智能推荐

(一)MFC读取并显示一幅位图图像,并获取鼠标点击位置的像素坐标和灰度值_手动输入坐标值 自动显示图像灰度值 软件-程序员宅基地

文章浏览阅读1.2w次,点赞25次,收藏140次。 题目是老师布置的一道作业题,要求用C或C++完成,但不能用VTK/Opencv等软件包,经过很多摸索之后实现了该功能,后续可能还有其他功能要实现,所以先写一篇博客记录下,一方面是方便自己以后使用,另一方面是给其他人做个参考,少走一些弯路。说不定以后学弟学妹们就看到了这篇博客(猜猜我是哪个学校的?)一、作业要求要求读取一幅位图图像,即BMP位图,并显示该图像在对话框内。鼠标点击该..._手动输入坐标值 自动显示图像灰度值 软件

Android 加载jni报错java.lang.UnsatisfiedLinkError: dlopen failed: library "libandroid_runtime.so" not-程序员宅基地

文章浏览阅读5.1k次,点赞2次,收藏6次。在Android 7.0以后,系统加了限制,访问私有so库有了限制,报错为下面的: PID: 3918 java.lang.UnsatisfiedLinkError: dlopen failed: library "libandroid_runtime.so" not found at java.lang.Runtime.loadLibrary0(Runtime.ja..._libandroid_runtime.so

美团餐饮娱乐知识图谱——美团大脑揭秘-程序员宅基地

文章浏览阅读352次。2019独角兽企业重金招聘Python工程师标准>>> ..._美团知识图谱

全国计算机二级第54次,我校成功组织实施第54次全国计算机等级考试-程序员宅基地

文章浏览阅读105次。2019年3月30至31日,我校成功组织了第54次全国计算机等级考试。本次考试,我校共安排18个标准化考场,8个批次,共计6894名考生参加考试。考试期间,副校长徐小立、教务处处长瞿述、信息学院书记甘向阳、纪委副书记曹斯曼、南湖学院副院长李革新、岳阳市教体局招考办等相关单位负责同志对考试工作进行全程巡视、指导,考试过程中考场秩序及考风良好。(教务处处长瞿述、副处长刘隆华、信息学院副院长周小强、纪委..._全国计算机二级开信号屏蔽仪吗

【Linux网络编程一】网络基础1(网络框架)-程序员宅基地

文章浏览阅读943次,点赞10次,收藏23次。【Linux网络编程一】网络基础(网络框架)重点:①什么是协议②协议分层③操作系统与网络协议栈关系④局域网下如何通信⑤以太网下如何通信⑥交换机作用

Linux 下用于 C/C++ 的最好的 IDE /编辑器_linux好用的c++ ide-程序员宅基地

文章浏览阅读1.2k次。参考17 个 Linux 下用于 C/C++ 的最好的 IDE /编辑器_linux好用的c++ ide

随便推点

NPN和PNP 的电流方向 、大小关系 、电压偏置_pnp型3极管-程序员宅基地

文章浏览阅读10w+次,点赞157次,收藏720次。电流流向: NPN PNP它最主要的功能是电流 放大和开关作用。Emitter,Base,CollectorNPN管,集电极电流IC和基极电流IB流入管子。发射极电流IE流出管子。且IC+IB=IE。 Icb+Ibe=Ice 即βIbe+Ibe=IcePNP管,集电极电流IC和基极电流IB流出管子。发射极电流IE流入管子。同样IC+IB=IE。无论管子..._pnp型3极管

【特别推荐】14个支持响应式设计的流行前端开发框架_前端是否有类似liteflow的框架-程序员宅基地

文章浏览阅读1.8k次。在几年前,并没有真正意义上的前端开发。随着网络技术的发展,网站和 Web 应用程序变得越来越复杂,前端部分的工作独立出来逐渐成为现在的前端开发。如今,我们可以看到越来越多的公司在招聘前端开发岗位。前端开发并不容易,除了掌握基本的 HTML、CSS 和Javascript 之外,因为不同版本的浏览器和平台,你需要知道如何做一个跨浏览器的网站。而最新的发展趋势——响应式设计,它不仅_前端是否有类似liteflow的框架

人工神经网络算法的应用,人工神经网络发展历史_w.s.mcculloch-程序员宅基地

文章浏览阅读969次。其次,当时的电子技术工艺水平比较落后,主要的元件是电子管或晶体管,利用它们制作的神经网络体积庞大,价格昂贵,要制作在规模上与真实的神经网络相似是完全不可能的;(3)非线性映射能力当对系统对于设计人员来说,很透彻或者很清楚时,则一般利用数值分析,偏微分方程等数学工具建立精确的数学模型,但当对系统很复杂,或者系统未知,系统信息量很少时,建立精确的数学模型很困难时,神经网络的非线性映射能力则表现出优势,因为它不需要对系统进行透彻的了解,但是同时能达到输入与输出的映射关系,这就大大简化设计的难度。..._w.s.mcculloch

笔记神器Typora(Markdown)_typora笔记成果-程序员宅基地

文章浏览阅读325次。2020-8-9 mark工具推荐推荐一款轻量简洁的Markdown编辑器——Typora,好用到爆。之前用的是Atom+插件(markdown-preview-enhanced, markdown-writer),也挺不错的,但是就是功能太多,界面不够简洁。目前的使用方式是Typora + Atom + CSDN结合使用:Typora用来打字和产出Atom结合插件进行文件的管理CSDN将写好的文章或者笔记进行发布接下来说说,Typora的几点好处。支持Markdown的所有语._typora笔记成果

坚果SmartisanYQ601(32G) 安卓5.1.1获取Root权限_坚果投影仪root-程序员宅基地

文章浏览阅读7.9k次。坚果SmartisanYQ601(32G存储,2G运行内存) 安卓5.1.1 获取Root权限本来只是想获取root权限,删除系统的一些无用的东西的。后来折腾了很久,没能获得 root 权限,刚开始的时候使用了各种 获取root的软件来试,都没有拿到 root,后面试着刷 recovery,但是刷recovery又需要有root权限才能刷,所以就没办法刷入 recov_坚果投影仪root

苹果内置录屏SDK-ReplayKit库的使用说明_uniapp replaykit-程序员宅基地

文章浏览阅读2k次。原文 http://www.cnblogs.com/huangzizhu/p/5073389.html主题 ReplayKit1 iOS ReplayKit 录屏SDK 说明 (按照苹果官方的说法是App端加入这些苹果的新特性新SDK更容易被苹果推荐 )ReplayKit是苹果在iOS9上面提供的一个库组件,可以让玩家在游戏中录制游戏视频,并且可以添加语音评论,然_uniapp replaykit

推荐文章

热门文章

相关标签