边框与圆角

发表于 更新于 分类于

盒子阴影

  1. box-shadow: 10px 20px 30px rgba(0, 0, 0, .4);
  2. inset（内阴影，可选），x偏移，y偏移，模糊量，阴影延展（可选），颜色
  3. 可以用逗号隔开多个阴影
    1
    2
    3
    4
    5
    6
    .box1 {
           width: 100px;
           height: 100px;
           box-shadow: inset 10px 20px 30px 40px rgba(0, 0, 0, .4),10px 20px 30px #ff0000;
           border: 1px solid #333;
       }

边框

  1. border-top
  2. border-bottom
  3. border-left
  4. border-right
  5. border-方向-style 边框线形
  6. border-方向-width 边框宽度
  7. border-方向-color 边框颜色
  8. border-方向:none 去掉边框
  9. 利用border制作三角形
    • width: 0; height: 0; border: 20px solid transparent; margin-top: 50px; border-top-color: #ff0000;
  10. 边框的三要素
    • 线宽度、线型、线颜色
      • solid 实线
      • dotted 虚线（圆）
      • double 双边
      • dashed 虚线（矩形）
    • border:1px solid #ff0