程序员经验分享-hwhale

将 box-shadow 设置为一组 HTML 元素

2024-01-30

我有两个元素，它们的侧面相互接触。它们的接触面具有不同的尺寸/尺寸。它们都需要在下面有一个阴影。

问题是其中一个阴影总是覆盖其同级元素。我可以玩z-index但这只是意味着我将选择两者中的哪一个将被兄弟姐妹的阴影覆盖。

如果可以向一组元素添加阴影，那就太好了，在这种情况下，阴影将在该组后面渲染，而不会受到任何元素干扰，并且无论它们如何z-index垂直排序。

是否有可能在 CCS3 中实现类似的效果而无需借助阴影图像？


也许使用一个

div:after {

伪元素

http://jsfiddle.net/2P964/ http://jsfiddle.net/2P964/

有点像杯子方法，但它有效:)

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

将 box-shadow 设置为一组 HTML 元素 的相关文章

  • 我们如何在jquery中添加css+动画？

    这是我正在尝试做的事情的一小段 why red a hover function this animate webkit transform scale 1 1 slow function this animate webkit trans

  • 如何使用 Twitter Bootstrap 创建类似 Gmail 的布局

    是否可以使用 Twitter Bootstrap 创建类似 GMail GoogleGroups 的布局 以便布局始终适合视口 窗口高度 并且侧边栏和内容区域适合 单独滚动 Fixed top navbar

  • Bootstrap 3 列列排序

    Bootstrap 3 2 1 排序 三列排序问题 尝试在小屏幕上订购三列 如下图所示 In medium screen it should be like above image but ordering is not working i

  • 在 Selenium 中自动执行下拉菜单而不选择

    我正在尝试使用 Selenium 从下拉列表中选择一个元素 我已经能够选择下拉列表 但我不知道如何从下拉列表中选择特定元素 因为该网站不使用 select 因此我无法使用内置的 select 类 作为参考 这是下拉列表中元素之一的 HTML

  • 嵌套在另一个内联块元素中的内联块元素具有 offsetTop

    我刚开始学习 HTML 现在我有一些代码 例如 div style height 300px width 500px font size 6 div style display inline block background pink wi

  • CSS 字体不起作用

    我正在尝试向我的网站添加自定义字体 我尝试了很多事情但没有成功 这是我的CSS代码 font face font family myFirstFont src url ellis ttf body margin 0 padding 0 wi

  • 有没有办法在 Nokogiri css 中转义非字母数字字符？

    我有一个锚标签 file html stuff morestuff CHP 1 SECT 2 1 尝试提取 Nokogiri 中引用的内容 documentFragment at css stuff morestuff CHP 1 SECT

  • 溢出-x 不工作

    我正在尝试为我的画廊实现一个滑块 目前 CSS 存在溢出 x 无法正常工作的问题 我想要一个水平滑块而不是垂直滚动 这是fiddle http jsfiddle net nevinm 6H43f 请务必看一下 testimg height

  • 三行无表 CSS 布局，中间行填充剩余空间

    我需要的是一个包含 3 行的基于像素高度的 div 最上面一行的高度根据内容而变化 底行具有固定高度 中间行填充任何剩余空间 一切都是宽度 100 我一直在努力构建一个 div 和基于 CSS 的布局几个小时 这让我从字面上看seconds

  • -webkit-overflow-scrolling：触摸；无效的属性值

    我不明白为什么这不起作用 我把它放在我的 html 和正文中 它仍然显示无效的属性值并被划掉 我首先尝试在媒体查询中使用它 但它在那里不起作用 有谁知道它对我不起作用的潜在原因 谢谢你 html body width 100 height

  • HTML/CSS 水平导航子菜单悬停显示错误

    我正在创建一个带有水平导航和垂直子菜单的 HTML 页面 一切工作正常 除了子菜单上的悬停显示在实际菜单项的左侧 看我的jsfiddle https jsfiddle net qmcte349 https jsfiddle net qmct

  • 如何在CSS中嵌套多个计数器？

    我想用 CSS 嵌套两个不同的编号 以获得如下所示的自动编号 1 第 1 节 1 1 小节1 1 2 小节1 2 第 2 节 2 1 小节2 2 2 小节2 这是我实现这一目标的尝试

  • Position:fixed 内的position:fixed: 哪个浏览器是正确的？

    将固定元素放置在另一个固定元素内的行为在 Chrome Safari 与 Firefox 中有所不同 这个答案很好地解释了预期的行为 https stackoverflow com a 28576596 1437016对于相对 div 内的

  • 是否可以使用 Chrome 开发者工具审核多个页面？

    我试图找出我的网站中未使用的 CSS 类 然后我发现 Chrome 开发者工具中有一个审核功能 可以标记未使用的 CSS 类 但是 它一次只能执行一页 有没有办法让它审核多个页面 以便我可以找出所有页面中未使用的 CSS 类 我知道有一个

  • CSS：仅背景不透明度，而不是内部文本[重复]

    这个问题在这里已经有答案了 我有这个注册表框 我真的很喜欢背景如何变得不透明 透明为 25 85 但后来我注意到文本和表单元素也变暗了一点 所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西 regForm z index 11

  • 占位符不适用于 Internet Explorer

    我的应用程序出现了小问题 Internet Explorer 11 上不存在占位符 我尝试了下面的 CSS 示例 但没有成功 ms input placeholder IE10 11 color ccc important font wei

  • Django 未在 404 页面上应用应用程序中的 CSS 文件

    姜戈3 0 8 Python 3 7 x 我有一个包含一些应用程序的 Django 项目 我正在尝试为 400 403 404 500 错误制作一些 默认 错误页面 我已经这样做了 并显示了适当的模板 但没有任何样式或 JS 在 404 错

  • 如何使链接悬停时的背景图像模糊？

    当您用鼠标光标悬停链接时 我想让我的背景图像模糊 5 像素 有什么简单的方法可以实现这一点吗 我有点纠结于类和 id 在这里 pic background url http www metalinjection net wp content

  • LESS CSS 在媒体查询中设置变量？

    我正在开发一个专门针对 iPad 的网站 为了使我的网站能够在视网膜显示屏 iPad 和旧版本 iPad 上运行 我想在媒体查询中的 LESS CSS 中设置一个变量 例如 media all and max width 768px rat

  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te

随机推荐

  • 向量借用和所有权[重复]

    这个问题在这里已经有答案了 这不起作用 let vectors vec 1 2 3 4 5 6 7 for i in vectors println Element is i let largest vectors 0 错误信息 error

  • 随机数生成：如果我运行，则在 C# 中返回相同的数字。好吧，如果一步一步调试

    我在 C 中生成随机数时遇到问题 如果我RUN直接使用此表单应用 随机数生成对于所有人都是相同的 If i DEBUG逐行按F10 就会产生不同的随机数 为什么会发生这种情况 我应该怎么做才能生成不同的随机数 灰狗 cs using Sys

  • Directory.Move 子文件夹和父文件夹时 IOException 访问被拒绝

    我正在尝试重命名具有子文件夹的多个文件夹 但是当我在子文件夹上使用 Directory Move 时 父文件夹似乎被锁定 My code var pathParent D test f1 var pathSub D test f1 f2 v

  • Android SensorManager 中的 getSensorList() 与 getDefaultSensor()

    我正在为 Android 编写一个游戏 希望能够使用加速度计进行输入 我看到有两种获取传感器的方法 一种方法是使用第一个元素SensorManager getSensorList Sensor TYPE ACCELEROMETER 另一个是

  • ASP 文件上传静默失败

    我在使用 FileUpload 处理大文件时遇到问题 如果我上传一个小文件 10kB 它工作得很好 上传大文件 60MB 不会引发异常 它只是重新加载页面 在有人问之前

  • 如何从 R 中的 ols 对象中提取斜率的 p 值

    If I do data mtcars m1 lt lm mpg cyl data mtcars x TRUE y TRUE 然后我可以使用提取斜率的 p 值summary m1 coefficients 2 4 但如果我这样做 libra

  • 从 GitHub 上托管的存储库的多个分支获取提交

    我想使用 RSS 源显示托管在 GitHub 上的存储库上的提交活动 我正在使用网址 https github com RiverDonkey Drupal Mailcheck commits atom 但问题是这将导致仅从基础分支 在本例

  • 如何在 PyCharm 中下载文件而不是 Colab 中的 !wget？ [复制]

    这个问题在这里已经有答案了 当我在pandas中尝试一些代码时 bash代码wget在colab中使用如下 import pandas as pd wget abc com sales csv 如果我想使用 PyCharm 下载上述互联网文

  • 如何用AJAX和MVC实现文件下载

    我想通过使用 jQuery AJAX 调用和 MVC 下的一些参数来提供文件下载操作 Example javascript function DoDownload startDate ajax url controller GetFile

  • 在选定文本周围插入标签

    我环顾四周 但其他答案并没有真正帮助我 我想创建一个小型所见即所得编辑器 只需要有添加链接和添加列表的选项 我的问题是 当单击链接 按钮之一 例如 添加链接 时 如何在文本区域中的选定文本周围附加标签 我已经编写了一个 jQuery 插件来

  • JMeter 将变量设置为随机选项

    我一直在使用 JMeter 我知道 Random and RandomString功能 我需要选择一个随机选项并将其存储在变量中 因为它将用作多个调用的参数路径的一部分 例如 http www example com pets random

  • 模块构建失败：错误：`sass-loader` 需要 `node-sass` >=4。请安装兼容版本

    你能帮助我吗 当我点击 ng s 时出现此错误 ERROR in src styles scss node modules raw loader node modules postcss loader lib embedded node m

  • 未知函数断言失败

    我正在使用这个程序来读取和显示图像 我不知道为什么它显示这个奇怪的错误 断言失败 scn 3 scn 4 在未知函数中 文件 src modules imgproc src color cpp第3326行 我更改了一些图像 有时它运行时没有

  • MySQL CREATE TABLE 语句中的主键定义

    这段代码有什么区别 CREATE TABLE samples sampleid INT 11 NOT NULL AUTO INCREMENT sampledate DATE NOT NULL location VARCHAR 25 NOT

  • 如何为 traefik 启用 logrotation？

    如何启用日志文件的日志轮转 例如访问日志 这是内置的吗 文档只说 这允许日志由外部程序轮换和处理 例如 logrotate 如果你正在跑步Traefik in a Docker容器然后你可以做这样的事情 检查 Docker 主机上是否安装了

  • 在Python中查找两个等值线图的交集

    我想知道是否有人可以给我找到两个等高线图交集的线索 理想情况下 它将采用一对轮廓 然后返回交点的坐标 Z1 somefunction Z2 somefunction1 Z3 somefunction2 xlist np linspace 0

  • Django allauth 示例 [Errno 61] 连接被拒绝

    当我运行 django allauth example 并尝试发送电子邮件时出现以下错误 File System Library Frameworks Python framework Versions 2 7 lib python2 7

  • 如何在 Matlab 中更新 scatter3 图（循环）

    这是一个非常简单的问题 但在网上找不到答案 我想可视化从激光雷达收集的点云 我可以绘制各个帧 但想循环它们以创建 动画 我知道如何使用 Drawingow 处理正常绘图 但无法使用 scatter3 处理它 如果我只是像在注释代码中所做的那

  • 如何检测有人摇晃 iPhone？

    我想在有人摇晃 iPhone 时做出反应 我并不特别关心他们如何摇动它 只是在瞬间用力挥动它 有谁知道如何检测这个 在 3 0 中 现在有一种更简单的方法 挂钩新的运动事件 主要技巧是您需要有一些 UIView 不是 UIViewContr

  • 将 box-shadow 设置为一组 HTML 元素

    我有两个元素 它们的侧面相互接触 它们的接触面具有不同的尺寸 尺寸 它们都需要在下面有一个阴影 问题是其中一个阴影总是覆盖其同级元素 我可以玩z index但这只是意味着我将选择两者中的哪一个将被兄弟姐妹的阴影覆盖 如果可以向一组元素添加阴

热门标签