前端 CSS 经典:box-shadow

简介: 前端 CSS 经典:box-shadow

1. 基础属性

/* box-shadow: h-shadow v-shadow blur spread color inset; */
box-shadow: 10px 10px 2px 2px red inset;

h-shadow: 必填,水平阴影的位置,允许负值

v-shadow: 必填,垂直阴影的位置,允许负值

blur: 可选,模糊程度

spread: 可选,阴影大小

color: 可选,阴影颜色

inset: 可选,设置后为内侧阴影

2. 解释

boxShadow 可以用逗号分割多个阴影设置,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0

例如:

.box {
  box-shadow: 1px 1px 2px 2px blue, 1px 1px 2px 2px red inset;
}

 


目录
相关文章
|
9天前
|
前端开发 JavaScript 程序员
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
|
16天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
25 2
|
15天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
24天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
1月前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
20 0
|
1月前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
34 0
|
1月前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
24 0
|
1月前
|
前端开发
前端 CSS 经典:模特换装效果
前端 CSS 经典:模特换装效果
46 0
|
1月前
|
前端开发 算法
前端 CSS 经典:filter 滤镜
前端 CSS 经典:filter 滤镜
30 0
|
1月前
|
前端开发
前端 CSS 经典:弧形边框选项卡
前端 CSS 经典:弧形边框选项卡
36 0