前端基础 -- css效果深化

1. box-shadow（盒子阴影）：

• 属性：
  • 偏移量：水平偏移量 垂直偏移量（正值向右下偏移，负值向左上偏移）
  • 模糊半径：阴影的模糊程度，值越大越模糊
  • 扩展半径：阴影的扩展程度，值越大阴影范围越大，包括模糊区域和实体区域
  • 颜色：阴影的颜色
  • 实体包含：默认在内容周围产生阴影，如果添加inset关键字，则在内容内部产生内阴影
• 用途：
  • 营造层次感（立体感）：通过调整偏移量、模糊半径和扩展半径，可以使元素看起来浮在背景之上或之下，增加立体感。
  • 充当没有宽度的边框（不占据空间）：通过设置合适的偏移量和模糊半径，可以实现类似边框的效果，但不会增加元素的实际大小。
  • 特殊效果–制作图案：可以通过一系列投影来绘制复杂的图案，例如制作机器猫等图形，但使用过多的投影可能会影响性能。
• 示例代码：

  .box {
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
  }
  

2. text-shadow（文本阴影）：

• 属性：
  • 偏移量：水平偏移量 垂直偏移量（正值向右下偏移，负值向左上偏移）
  • 模糊半径：阴影的模糊程度，值越大越模糊
  • 颜色：阴影的颜色
• 用途：
  • 添加立体感：通过在文本周围添加阴影，可以使文本看起来浮在背景之上，增加立体感。
  • 印刷品质感：可以用于制作文字边框或印刷效果，增加文字的质感和可读性。
• 示例代码：

  .text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
  

3. border-radius（边框圆角）：

• 属性：
  • 圆形矩形：border-radius设置为一个等于宽度一半的值，实现圆形矩形。
  • 圆形：border-radius设置为50%，实现圆形。
  • 半圆/扇形：通过设置border-radius的不同角，可以实现半圆或扇形效果。
  • 奇奇怪怪的图形：可以通过合理设置不同角的圆角半径，创造各种奇特的形状。
• 用途：
  • 圆角效果：通过设置边框的圆角，使元素边框变得更加圆润和柔和。
  • 创意造型：通过组合不同的圆角半径，可以实现各种有趣的图形效果。
• 示例代码：

  .rounded-rectangle {
    border-radius: 10px;
  }
  
  .circle {
    border-radius: 50%;
  }
  
  .semicircle {
    border-radius: 50% 50% 0 0;
  }
  
  .custom-shape {
    border-radius: 20% 50% 10% 70%;
  }
  

4. background（背景）：

• 属性：
  • 多背景叠加：可以通过设置多个background-image实现多层背景叠加。
  • 背景颜色：可以设置一个或多个背景颜色。
  • 背景图片：可以设置一个或多个背景图片。
  • 背景大小：可以控制背景图片的尺寸适应，常用的值有auto、cover、contain等。
  • 背景平铺：可以设置背景图片的平铺方式，常用的值有repeat、no-repeat、repeat-x和repeat-y等。
  • 背景定位：可以设置背景图片的起始位置，常用的值有像素值、百分比和关键字如top、center、bottom等。
  • 背景裁剪：可以设置背景图片的裁剪方式，常用的值有border-box和content-box。
  • 背景原点：可以设置背景图片的原点位置，常用的值有像素值和百分比。
• 用途：
  • 多样化背景：通过设置多个背景图片和颜色，可以实现丰富多彩的背景效果。
  • 图片平铺：通过设置背景平铺方式，可以实现背景图片的平铺效果。
  • 背景定位：通过设置背景图片的起始位置，可以调整背景图片在元素内的显示位置。
• 示例代码：

  .multi-background {
    background: url(bg1.png) center/cover, url(bg2.png) repeat;
    background-color: #f00;
  }
  
  .background-size {
    background: url(bg.png) no-repeat center/50% 50%;
  }
  

5. clip-path（裁剪路径）：

• 属性：
  • 对容器进行裁剪：可以通过设置不同的形状，实现裁剪容器的效果。
  • 常见几何图形：clip-path提供了一些预定义的形状，例如圆形、椭圆、三角形等。
  • 自定义路径：可以使用path函数或polygon函数来定义自定义路径，实现更复杂的裁剪效果。
• 用途：
  • 创意裁剪：通过clip-path属性，可以实现独特的裁剪效果，用于创意和设计。
  • 图片裁剪：可以将图片裁剪成不规则的形状，增加视觉吸引力。
• 示例代码：

  .clip-circle {
    clip-path: circle(50% at center);
  }
  
  .clip-square {
    clip-path: inset(0);
  }
  
  .custom-shape-clip {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 20% 100%);
  }
  

6. 3D transform：

• 2D部分：
  • translate（位移）：移动元素位置，参数为水平位移和垂直位移。
  • scale（缩放）：放大或缩小元素，参数为水平缩放和垂直缩放。
  • skew（斜切）：使元素倾斜，参数为水平斜切角度和垂直斜切角度。
  • rotate（旋转）：旋转元素，参数为旋转角度。
  • 注意：每个操作之间不可随便交换顺序，会影响最终效果。
• 3D部分：
  • 透视：通过设置perspective属性，为元素添加透视效果，使元素看起来更立体。
  • transform-style：设置是否在3D空间中保留元素的子元素的3D变换。
• 示例代码：

  .element-2d {
    transform: translate(20px, 20px) rotate(30deg) scale(1.5) skew(10deg, 5deg);
  }
  
  .element-3d {
    perspective: 500px;
    transform-style: preserve-3d;
    transform: translateZ(50px) rotateY(30deg);
  }