四、CSS效果

box-shadow

• box-shadow作用
  • 营造层次感（立体感）
  • 充当没有宽度的边框
  • 特殊效果（一个div画图形）
• box-shadow属性
  • box-shadow:64px 64px 24px 40px rgba(0,0,0,0.4)
  • 前两个值为偏移量
  • 第三个值为阴影模糊区域大小
  • 第四个值为阴影扩展区域大小
    • 模糊，是实的,一般为0
    • 把偏移模糊都设为0，只设置阴影扩展区域大小，就相当于边框
    • 设置偏移和阴影扩展区域大小，就像元素的复制(设为负值变小)
  • 第五个值为阴影颜色
  • 如果是内阴影，再加inset

text-shadow

• text-shadow作用
  • 立体感
  • 印刷品质感
• text-shadow属性
  • text-shadow:1px 1px 0 rgba(0,0,0,0.2)
  • 前两个值为偏移
  • 第三个值为模糊区域大小（会有墨水浸在纸上的印刷感）
  • 字和背景颜色一致时，可以给四个方向都设置偏移，造成镂空字的感觉

border-radius

• border-radius作用

  • 圆角矩形
  • 圆形
  • 半圆、扇形
  • 一些奇怪的图形

• border-radius属性

  • border-radius:10px(圆角矩形)
  • border-radius:50%(正方形变圆,有边框border，边框也是圆)
  • border-radius:10px/20px(变椭圆)

• 利用boder-radius画特殊图形

  • 圆形：元素的宽高相同，且圆角半径为宽高的一半

  div{
      width: 100px;
      height: 100px;
      border-radius: 50%;
  }
  

  • 半圆:元素宽高不同，且圆角半径与宽高要配合

  div{
      width: 100px;
      height: 50px;
      border-radius: 50px 50px 0 0;
  }
  

  • 扇形：元素宽高及一个圆角半径相同

  div{
      width: 50px;
      height: 50px;
      border-radius: 50px 0 0 0;
  }    
  

  • 椭圆:元素宽高不同，且水平和垂直半径分别对应宽高

  div{
      width: 120px;
      height: 80px;
      border-radius: 120px/80px;
  }            
  

  

background

• background作用
  • 纹理
  • 图案
  • 渐变
  • 雪碧图动画
    • 雪碧图中两张图排列在一起，通过background-position,实现两图切换
  • 背景图尺寸适应方案
    • background-position:center center (背景图在容器水平垂直居中)
    • background-size：背景图大小，默认会在容器重复，可以通过background-repeat来设置重复
    • background-size:cover 覆盖整个容器，且保证图片长宽比不变，超出部分隐藏
    • background-size:contain 完整显示图片，且保证图片长宽比不变，不够的部分空白

clip-path

• clip-path作用

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

• clip-path属性

  • 不改变容器大小
  • clip-path: inset(100px 50px);矩形
  • clip-path: circle(50px at 100px 100px)；圆形裁剪
  • clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);多边形，定义几个坐标（可用百分比和像素）
  • 自定义路径(利用svg矢量图)

  clip-path: url(#clipPath);
  
  

3D变换

• 变换 transform
  • translate 位移
  • scale 缩放
  • skew 斜切
  • rotate 旋转
• 设置perspective属性// 观看位置距离盒子的距离
• 设置transform-style:perserve-3d
• 利用translateX/translateY/translateZ
• 利用rotateX/rotateY