CSS 阴影效果

简介: CSS 阴影效果

阴影效果

  • text-shadow
  • box-shadow

box-shadow { h-shadow, v-shadow, blur, spread, color, inset }
  • h-shadow : 表示的是纵向的阴影距离.
  • v-shadoe : 表示的是横向的阴影距离.
  • blur : 表示的是阴影的模糊距离. 数值越大阴影越模糊.
  • spread : 阴影的尺寸. 数值越大,阴影面积会越大.
  • color : 表示的是阴影的颜色.
  • inset : 将阴影变为内部阴影.

  • 文字阴影效果
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}


相关文章
|
6月前
|
前端开发
|
1月前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
75 1
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
3月前
|
前端开发
CSS动画新技巧:打造阴影上下抖动的视觉效果!
CSS动画新技巧:打造阴影上下抖动的视觉效果!
|
4月前
|
前端开发
css特效实例——纯css实现带边角卷边阴影的纸
css特效实例——纯css实现带边角卷边阴影的纸
41 1
|
5月前
|
前端开发
css动画效果(边框流光闪烁阴影效果)
css动画效果(边框流光闪烁阴影效果)
|
5月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
49 0
|
5月前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
76 0
|
6月前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
51 0
|
6月前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
66 0