参考资料

  1. 背景属性详细说明以及案例
  2. 详细说明:justify-content: flex-start/end
  3. flex-direction: row/column
  4. 属性选择器详细说明以及案例
  5. css div阴影效果,
  6. css文字阴影属性
  7. 边框属性详细说明以及案例
  8. 伪类选择器详细说明以及案例

css阴影效果属性有哪些,

CSS 阴影效果属性:

  1. box-shadow

    • 属性:box-shadow: h-offset v-offset blur spread color inset;

    • 用法:为元素添加阴影效果

    • 示例:

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

    • 属性:text-shadow: h-offset v-offset blur color;

    • 用法:为文本添加阴影效果

    • 示例:

      .text {
        text-shadow: 2px 2px 4px #000000;
      }
  3. drop-shadow() (filter属性)

    • 属性:filter: drop-shadow(h-offset v-offset blur color);

    • 用法:为元素添加阴影效果,支持透明部分

    • 示例:

      .image {
        filter: drop-shadow(8px 8px 6px #666);
      }
  4. inset 关键字

    • 属性:与box-shadow一起使用

    • 用法:创建内阴影效果

    • 示例:

      .box {
        box-shadow: inset 0 0 10px #000000;
      }
  5. spread 参数

    • 属性:box-shadow的第四个参数

    • 用法:控制阴影的扩展大小

    • 示例:

      .box {
        box-shadow: 0 0 0 10px #ff0000;
      }