CSS阴影

简介: CSS阴影

1677577892293.png


1 box-shoadow 盒子阴影


box-shadow属性可以设置一个或者多个阴影


  • 多个阴影之间用逗号 , 隔开,前面的阴影在上,后面的在下


box-shadow: 10px 10px 5px 5px red, 20px 20px 5px 5px blue;
/*此时 red 的阴影在上,blue在下*/


此时为外阴影:


  • box-shadow:水平偏移(px) 垂直偏移(px) 模糊度(px) 阴影扩展(px) 阴影颜色(color);


此时为内阴影(基本不会用):


  • box-shadow:水平偏移(px) 垂直偏移(px) 模糊度(px) 阴影扩展(px) 阴影颜色(color) inset;


注意点:


  • 快速添加阴影只需要三个参数就行:box-shadow:水平偏移(px) 垂直偏移(px) 模糊度(px);
  • 阴影颜色默认为盒子内容的颜色
  • 当水平偏移和垂直偏移为0时,就是周围一圈都有阴影


我们可以通过一个网站测试盒子/文字的阴影:



image.png


2 text-shadow


text-shadow:水平偏移(px)  垂直偏移(px)  模糊度(px)  阴影颜色(color);


注意点:


  • 快速添加阴影只需要三个参数就行:box-shadow:水平偏移(px) 垂直偏移(px) 模糊度(px);
  • 阴影颜色默认为文字内容的颜色
  • 水平偏移和垂直偏移一般不为0
目录
打赏
0
0
0
0
1
分享
相关文章
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
160 0
精通 CSS 阴影效果:从基础到高级应用
本文详细介绍了CSS阴影效果的使用方法,包括`box-shadow`和`text-shadow`的基本语法、参数解释及进阶应用。通过多个示例展示了如何实现外阴影、内阴影、渐变阴影以及多重阴影效果,并结合实际场景如浮动按钮和卡片式设计,说明了阴影与背景的综合应用。此外,还提供了性能优化建议,帮助开发者在确保视觉效果的同时提升页面性能。最后,总结了CSS阴影的重要性及其对网页美观度和用户体验的提升作用。
80 6
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
121 1
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
CSS动画新技巧:打造阴影上下抖动的视觉效果!
CSS动画新技巧:打造阴影上下抖动的视觉效果!
|
6月前
|
css特效实例——纯css实现带边角卷边阴影的纸
css特效实例——纯css实现带边角卷边阴影的纸
54 1
css动画效果(边框流光闪烁阴影效果)
css动画效果(边框流光闪烁阴影效果)
|
7月前
|
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
62 0
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
98 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等