CSS效果常见问题

详细解答参见上篇博客

问题1.如何用 div 画一个 xxx

box-shadow 无限投影 (堆叠成复杂图案）

::before

::after

问题2.如何产生不占空间的边框

1.box-shadow

2.outline

问题3.如何实现圆形元素（头像）

border-radius:50%

问题4.如何实现ios图标的圆角

1.将设计图形导入矢量设计软件导成 svg

2.用 clip-path：（svg）制作圆角图标

问题5.如何实现半圆、扇形等图形

border-radius 组合：1.有无边框 2.边框粗细 3.圆角半径

问题6.如何实现背景图居中显示/不重复/改变大小

background-position / background-repeat / background-size(cover/contain)

问题7.如何平移、放大一个元素(transform 跟动画没有关系）

transform:translateX(100px)

transform:scale(2)

问题8.如何实现3D效果

1.perspective:500px(指定透视角度大小）

2.transform-style:preserve-3d（选择3D效果，不然是2D效果）

3.transform:translate rotate（变换）