参考资料

  1. CSS 阴影效果属性
  2. css布局格式
  3. 详细说明:justify-content: flex-start/end
  4. 如何提高Flex布局的性能?详细说明
  5. CSS 阴影效果设置
  6. Flex布局与Grid布局的对比?
  7. 如何用Flex布局制作响应式布局?
  8. 如何避免Flex容器高度塌陷?

css阴影颜色怎么设置

CSS阴影颜色设置

  1. 属性介绍:

  • box-shadow:用于元素边框阴影

  • text-shadow:用于文本阴影

  • drop-shadow():滤镜效果中的阴影

  1. 基本语法:
    box-shadow: h-offset v-offset blur spread color inset;
    text-shadow: h-offset v-offset blur color;

  2. 颜色值设置方式:

  • 关键字:black, white, red等

  • 十六进制:#RRGGBB或#RGB

  • RGB/RGBA:rgb(255,0,0)或rgba(255,0,0,0.5)

  • HSL/HSLA:hsl(0,100%,50%)或hsla(0,100%,50%,0.5)

  1. 用法示例:

/* 盒子阴影 */
.box {
 box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

/* 文本阴影 */
.text {
 text-shadow: 2px 2px 4px #ff0000;
}

/* 多重阴影 */
.multi-shadow {
 box-shadow:
   3px 3px 5px blue,
   -3px -3px 5px red;
}

/* 内阴影 */
.inset-shadow {
 box-shadow: inset 0 0 10px #000000;
}

/* 滤镜阴影 */
.filter-shadow {
 filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}