一个div实现一个iphone背部布局效果-html代码-BFW代码库

一个div实现一个iphone背部布局效果

代码语言：html

代码描述：一个div实现一个iphone背部布局效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<style>
*, *:before, *:after {
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
}

html, body {
  width: 100vw;
  height: 100vh;
}

#iphone-back {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
  width: 240px;
  height: 456px;
  background: #B0B8BB;
  border-radius: 45px;
  box-shadow: inset 7px -1px 14px -6px #535F63, inset -7px -1px 14px -6px #535F63, inset 0 -6px 18px 16px rgba(255, 255, 255, 0.2), inset 0 -170px 0 -80px #060D13, -60px -102px 0 -100px #17191E, inset 0 2px 18px 15px rgba(255, 255, 255, 0.8), inset 0 0 200px 0 #ADB6B9;
  /* Headphone jack not displaying correctly in Safari. Removing. 
  &:after{
    content:'';
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    right: 39px;
    top: -15px;
    border-radius: 50px;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    border-bottom: 1px solid #E1E4E5;
    border-top: 15px solid transparent;
    filter: drop-shadow(0 0 2px transparent);
    
    box-shadow:
      inset 0 -4px 0 0 #E1E4E5,  
      inset 6px 1px 3px 0 #808A8E,
      inset -6px 1px 3px 0 #808A8E,
      inset 7px -2px 4px 0 #B5BDBE,
      inset -7px -2px 4px 0 #B5BDBE,
      inset 0 18px 0 0 #9CA6AA,
      
      -147px 38px 0 -13px #5095D1,
      -147px 38px 0 -12px #0E264E,
      -148px 40px 0 -11px #1E4A6D,
      -148px 40px 2px -7px #232D32,
      -148px 40px 0 -6px #020003,     .........完整代码请登录后点击上方下载按钮下载查看