css3(3)

iPhone手机做法


css3(3)_第1张图片
Paste_Image.png

思路


  1. 先将要做模型分成5块:
    (1)#iphone > #camera + #headphone + #screen + #btn
  1. 难点1:主要集中在相对坐标,这里的做法是,如果不指定父类为相对坐标系,则子类会直接以body为坐标系,所以基本的做法都是选好要作为相对坐标系的父类,子类中指定绝对坐标,然后根据topleft的位置移动到最终的目标位置即可。
  1. 难点2:圆角矩形的半径,可以指定任意一边的半径大小,灵活使用。
  1. 难点3:beforeafter的使用,一般情况下都是将其指定为display:block
  1. 难点4:box-shadow:1px 2px 3px rgba(0,0,0, 0.5) inset;
  1. 难点5: 阻止边界传导,父元素overflow:hidden即可。

源码





    Bootstrap
    
    
    
    
    
    


  
iPhone6S

你可能感兴趣的:(css3(3))