css3(3)

iPhone手机做法

---

Paste_Image.png

思路

---

1. 先将要做模型分成5块：
   （1）#iphone > #camera + #headphone + #screen + #btn

2. 难点1：主要集中在相对坐标，这里的做法是，如果不指定父类为相对坐标系，则子类会直接以body为坐标系，所以基本的做法都是选好要作为相对坐标系的父类，子类中指定绝对坐标，然后根据top和left的位置移动到最终的目标位置即可。

3. 难点2：圆角矩形的半径，可以指定任意一边的半径大小，灵活使用。

4. 难点3：before和after的使用，一般情况下都是将其指定为display:block。

5. 难点4：box-shadow：1px 2px 3px rgba(0,0,0, 0.5) inset;

6. 难点5： 阻止边界传导，父元素overflow：hidden即可。

源码

---

    
    
    
    
    
    
    


  

    

        

        

        
iPhone6S