css阴影颜色怎么设置

参考资料

1. flex-direction: row/column
2. css div内容居中
3. css中设置div居中
4. 如何避免 CSS 过渡动画卡顿？
5. 层次/关系选择器详细说明以及案例
6. 如何添加按钮的过渡动画效果？
7. 如何优化过渡动画的性能？
8. css div阴影效果,

CSS阴影颜色设置

1. 属性介绍：

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

• text-shadow：用于文本阴影

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

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

3. 颜色值设置方式：

• 关键字：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)

4. 用法示例：

/* 盒子阴影 */
.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));
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。