CSS“真实”阴影(光源)

2023-12-31

看看下面的图片:

蓝色的盒子是div。现在我想做的是实现一种 2.5D 功能:

我希望灰色阴影有点 3D 风格。起初我想将“Y”轴分配给盒子阴影值,如下所示:

"box-shadow: -5px -5px 10px" + value.tallness +  "#888"

但结果就是上图。

关于如何仅在一侧制作阴影的想法,就像有来自某处的光源一样?

额外 - 怎么样moving“光源”?


就这样:http://jsfiddle.net/KaCDN/15/ http://jsfiddle.net/KaCDN/15/

拖动光源来影响阴影。

更高的块:

  • 有更大的上、左边框
  • 进一步降低阴影
  • 他们的影子更模糊
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS“真实”阴影(光源) 的相关文章

  • jquery 隐藏简单的 javascript 错误

    我在 chrome 和 firefox 中使用 jQuery 和 flot 当我编写代码时 我发现执行在一些愚蠢的事情上会默默失败 例如访问不存在的哈希结构等 感觉 jQuery 中有一些 try catch 逻辑 让我看不到任何错误 有没
  • Spring动态(可扩展)列表形式

    我在春季遇到动态表单问题 在我们的表单中 我们要指定一个标题 并添加一些问题 我们有一个 添加 按钮来添加问题输入表单 jquery 当需要时 我们的表格有一个问题字段 每次都会添加额外的字段 按下 添加 按钮 提交时似乎没有额外的字段 已
  • 为什么 setInterval 会无限循环

    我正在尝试设置一个计时器 以便它显示用户的秒数和分钟剩余时间 并且我正在使用setInterval获取秒数 如果有 60 秒 则会从用户处减少 1 分钟 问题是我变得无限for每次我尝试这样做时都会循环 就像是 var userObj na
  • 如何缩放 SVG 路径以适应窗口大小?

    我在缩放 SVG 以适应窗口大小时遇到 了麻烦 在这个例子中 我有一个波浪路径和一个文本元素 我想在这里实现的是沿着波浪路径从左到右移动文本元素 这是由GSAP完成的 并停在路径的中间在初始负载下 当用户开始滚动时 它将移至末尾 我的问题是
  • 帮助理解 JQuery 属性等于选择器

    我想找一个 td class one two three four 在一个 div 这两个选择器的工作原理 myid td role foo myid two 但这个却没有 为什么呢 myid two td role foo 因为选择器字符
  • Bootstrap 按钮的检查状态

    我想在 Bootstrap 3 0 2 中设置组复选框的选中状态 docs http getbootstrap com javascript buttons html div class btn group div
  • 如何为平板电脑和 iPhone 制作样式表

    我认为样式表上的链接目标将使我的 css 文件仅在平板电脑或 iPhone 上加载时加载 但我试图隐藏的元素仍然存在 我目前正在使用 media handheld 有太多的移动设备型号需要为其编写样式表 你最好根据以下内容调整你的CSS屏幕
  • 嵌套 .ajax() 调用的 JavaScript/jQuery 变量作用域问题

    我很难传递变量postData这是一个嵌套子级的序列化 jQuery 数组对象 ajax call postData成功传递给第一个 ajax 打电话 但是当我尝试在第二次使用它时 ajax 调用时 它不会发布任何表单元素 因为变量在该级别
  • Bootstrap .row margin-left: -15px - 为什么它会缩进(来自文档)

    我在 Bootstrap 文档中看到了这一行 http getbootstrap com css grid intro http getbootstrap com css grid intro It says 列通过填充创建装订线 列内容之
  • 是否可以使用 TypeScript 对 jQuery.fn.extend 进行建模

    我的猜测是 答案是 否 但我想检查一下是否有我错过的东西 jQuery 有一个fn extend 方法 http api jquery com jQuery fn extend 它允许您使用额外的方法来扩充 jQuery 对象 以下是 AP
  • dataTables fnFilter 列 on img 文件名

    我正在尝试根据标签的 src 属性中的图像文件名来过滤列 我的行看起来像这样 tr class unread odd td class td tr
  • 如何在索引视图中打印关联数据

    subjects this gt Subjects gt find all contain gt Users fields gt Users username Users email gt hydrate false gt toArray
  • 如何使div垂直滚动[重复]

    这个问题在这里已经有答案了 我用图片元素列表做了一个水平滚动 但是当我垂直滚动它时我失败了 我的水平滚动条代码是 div class pic container div class pic row div style width 100 a
  • 如何使用 file:///F:/foldername 访问 ajax 中的本地文件夹?但它适用于 http://

    在这里 我使用以下代码使用 AJAX jQuery 动态创建文件名列表 window load function var fileExt csv document ready function ajax url file F foldern
  • 如何在 CSS 中选择纯 HTML 文本?

    你们有人知道如何在 CSS 中选择纯 HTML 文本吗 我有以下结构 div p class caption caption1 p div class tabs div class moving bg div p class text ta
  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单
  • IE 中的 jQuery 鼠标闪烁

    当我在 IE 中执行 fadeIn fadeOut slideUp slideDown toggle 等 jQuery 函数时 鼠标总是闪烁 沙漏在光标旁边的视图中快速闪烁 我尝试了不同的方法来在动画进行时完全隐藏鼠标 但没有效果 而且在大
  • 等高列并将最后一项与底部对齐

    我有一个列表 其中每个li有嵌套容器 我尝试为所有列表项保留相同的高度 并将最后一个 div 推到底部 我将如何使用 flex 来做到这一点 ul list container display inline flex justify con
  • 如何比较 JavaScript 表格中的单元格并测试是否相等? indexOf 是如何工作的?

    我在 HTML 代码中创建了一个表格 它有 9 列和 13 行 它被 JavaScript 循环完全填满 该循环用几个数组中的人名填充它 但是 我想添加一个验证步骤 确保一行中没有两个单元格具有相同的值 并且每个单元格的值不会在其正下方的单
  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式

随机推荐

  • 如何在Linux/Unix中创建大小超过2GB的文件?

    我有一项家庭作业 我必须使用 BitTorrent 算法将一个非常大的文件从一个源传输到多台机器 最初 我将文件切成块 然后将块传输到所有目标 目标具有与其他目标共享其拥有的块的智能 效果很好 我想传输 4GB 文件 因此我对四个 1GB
  • SQLAlchemy 声明式中基于对象的默认值

    使用 SQLAlchemy 可以为每个函数添加默认值 据我了解 这也可能是可调用的 没有任何参数或带有可选的 ExecutionContext 参数 现在在声明性场景中 我想知道是否有可能有一个用object正在存储 IE 可能像这样 Ba
  • 如何从字符串创建 org.xml.sax.InputSource?

    我正在遵循指南 它给了我以下代码 InputSource inputSource new InputSource new FileInputStream new File path to xml file xml 我想知道的是我如何仍然可以
  • rbenv 上的 ruby​​ 3.0.0 在哪里

    rbenv install list all当然 除了许多其他事情之外 还向我展示了 3 0 0 dev 3 0 0 preview1 3 0 0 preview2 但在哪里3 0 0本身 实际的最终版本 我想尝试一下 并非所有已发布的功能
  • 在Python中格式化多行字典的正确方法是什么?

    在Python中 我想在我的代码中编写一个多行字典 有几种方法可以对其进行格式化 以下是我能想到的一些 mydict key1 1 key2 2 key3 3 mydict key1 1 key2 2 key3 3 mydict key1
  • 消息框停止验证

    我不明白为什么消息框 或 simpledialog 会破坏以下代码的流程 该代码基本上验证了 python 3 5 中的输入框 它检查该字段是否仅包含数字值 并且长度不超过 9 位数字 但输入框可以为空 在用户确定后 向用户添加一条消息 允
  • 使用正则表达式提取由分隔符分隔的文本的某些部分

    我有一个示例输入文件 如下所示 其中包含 ID 名称 开始日期 结束日期 年龄 描述和位置列 220 John 23 11 2008 22 12 2008 28 Working as a professor in University Hy
  • Wi-Fi 直连技术

    我正在考虑创建一个通过 Wi Fi Direct 传输视频流的应用程序 我已经用谷歌搜索过 甚至在 Stackoverflow 中 但我还没有找到指定支持设备的列表 我的问题是 是否可以在 Samsung Galaxy Mini 带有 An
  • 如何使用张量流训练简单的非线性回归模型?

    我见过这个线性回归的例子 https github com aymericdamien TensorFlow Examples blob master notebooks 2 20 20Basic 20Classifiers linear
  • 如何在 Django 中自定义 related_name 参数

    我有一个抽象模型和两个子模型 例如 class Invoice models Model user models ForeignKey User related name class s class Meta abstract True c
  • Drools(专家系统)与 Android 项目的集成

    我有兴趣使用 Drools JBoss 专家系统基于规则的系统开发 Android 应用程序 它通过 Eclipse 每个工具 v3 2 都有一个插件 但我不完全知道如何成功地将 Drools Jars 集成到 Android 项目中 有一
  • C++, Win32 LoadString 包装器

    我想听听您对 LoadString Win32 函数的这个包装的看法 int LoadWString HINSTANCE hInstance In UINT uID In std wstring str Out return LoadStr
  • Cucumber.wants_to_quit 的 cucumber-jvm 等价物是什么?

    我正在使用 cucumber jvm 编写测试 我希望系统在第一个失败的场景中停止运行测试 我找到了为 Cucumber Ruby 编写的示例代码 它通过 After 挂钩来执行此操作 我正在寻找正确的 java 类和方法来调用 这相当于在
  • 车把块助手:每个都有排序

    我有一个 json 对象数组 我使用 Handlebars 模板输出它们 我目前正在使用 each object each 我现在需要按对象的属性之一对对象进行排序 这再次使用把手助手和咖啡脚本没有问题 但是 我的模板中有一个问题 因为我无
  • mysql 准备好的语句参数和排序查询

    我有一个表单 其目的是将当前显示的记录放入一个类别中 我通过 php 使用以下 html 代码来执行此操作
  • 使用 JSON 序列化(和反序列化)“复杂”Rails 对象

    可能是一个愚蠢的问题 但我对 Rails 比较陌生 并且想知道 Rails 如何处理序列化具有多个 和 或属于 另一个类的对象的模型 它会默认序列化整个对象图吗 你一定想要那个吗 你能控制吗 如何 接收端关于如何反序列化它有什么技巧吗 或者
  • 想学习Windows编程,有什么建议吗? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • C 编译器如何发现 -lm 指向文件 libm.a?

    Linux 中 C 编程中的 a 文件是什么 是库文件吗 To merge with the math library libm a you would type cc o program name prog c lm when you c
  • 双端链表和双向链表的区别

    我不明白双端列表和双链表之间的区别 两者之间的主要区别是什么 在双向链表中 每个节点都有两个指针 一个朝向其下一个节点 另一个朝向其前一个节点 在双端链表中 每个节点只有一个指向其下一个节点的指针 它与单端链表的区别在于 它不是只有一个 头
  • CSS“真实”阴影(光源)

    看看下面的图片 蓝色的盒子是div 现在我想做的是实现一种 2 5D 功能 我希望灰色阴影有点 3D 风格 起初我想将 Y 轴分配给盒子阴影值 如下所示 box shadow 5px 5px 10px value tallness 888