CSS讲解(5) 效果

效果属性

**这个效果怎么实现？

CSS最出彩等一部分

box-shadow

box-shadow 属性向框添加一个或多个阴影

• 营造层次感(立体感)
• 充当没有宽度的边框
• 特殊效果

CSS3阴影演示工具

text-shadow

• 立体感
• 印刷品质感

border-radius

• 圆角距形
• 圆形
• 半圆 / 扇形
• 一些奇怪的角角

background

• 纹理，图案
• 渐变
• 雪碧图动画
• 背景图尺寸适应

clip-path

• 对容器进行裁剪
• 常见几何图形
• 自定义路径

3D 变换

• 变换 transform
  • translate 平移
  • scale 缩放
  • skew 倾斜
  • rotate 旋转
• 在3D空间进行变换

真题

• 如何用一个div画 xxx

  box-shadow 无限投影
  ::before
  ::after

• 如何产生不占空间的边框

  • box-shadow
  • outline

• 如何实现圆形元素

  • border-radius:50%

• 如果实现iOS图标的圆角

  • clip-path: (svg)

• 如何实现半圆，扇形等图形

  • border-radius组合：
    • 有无边框
    • 边框粗细
    • 圆角半径

• 如何实现背景图居中显示 / 不重复 / 改变大小

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

• 如何平移/放大一个元素

  • transform: translateX(100px)
  • transform: scale(2)

• 如何实现3D效果

  • perspective: 300px
  • transform-style: preserve-3d;
  • transform: translate rotate …