如何仅在 3 边应用盒子阴影? [复制]

2024-01-11

我在下面使用我的 CSS 页面。他在 4 边应用了方框阴影。

我希望它只应用于右侧、底部和左侧。

如何仅在 3 边应用框阴影?

-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
box-shadow: 0 0 10px rgba(0,0,0,0.22);

你总是可以做类似的事情:

.shadow-box {
  background-color: #ddd;
  margin: 0px auto;
  padding: 10px;
  width: 220px;
  box-shadow: 0px 8px 10px gray, 
    -10px 8px 15px gray, 10px 8px 15px gray;
 }
<div class="shadow-box">Box with shadows</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何仅在 3 边应用盒子阴影? [复制] 的相关文章

  • Sass 与 BEM,继承选择器

    我正在使用 Sass 3 4 1 和 BEM 所以我的 scss 是 photo of the day title font size 16px 我希望每次将鼠标悬停在 photo of the day标题发生了一些事情 这很常见 所以通常
  • SVG 内部跨度与文本不在同一行

    我在一个跨度内有一个 SVG 文件 同时包含文本 文本和 SVG 的高度相同 但是 SVG 与文本不在同一行 相关jsfiddle https jsfiddle net tcrnjd53 https jsfiddle net tcrnjd5
  • 当您点击外部时,Bootstrap 3 Mobile 导航不会崩溃

    当我单击 触摸菜单外部时 我的 Bootstrap 3 移动菜单确实会折叠 我可以想出一个解决问题的方法 document on touchstart click html not nav function navbar collapse
  • Bootstrap 使用 SASS 和 fontawesome 图标分隔符修改面包屑

    所以我正在尝试更改默认值breadcrumb与 SASS 的风格 我已经按照官方 Bootstrap 4 beta 3 文档中提到的方式设置了所有内容 我更改了以下内容custom scss breadcrumb divider f105
  • div 元素中的文本在 Firefox 中位于水平对齐的 span 元素之上

    我正在编写一个 Web 应用程序 其中支持票证显示为左侧的票证 ID 作为静态文本 其余字段 描述 严重性 持续时间 状态 报告者 在右侧显示为固定文本中的滚动文本 大小视口 我从一个 span 包含票证 ID 和视口 div 包含第二个
  • 为什么边框会增加元素的宽度?

    我有一个div如下 其指定宽度为 300px 边框宽度为 2px 为什么2px边框会导致宽度div是304px 如果我希望它有边框但宽度仍为 300 像素怎么办 test width 300px height auto border 2px
  • 有没有带有保存和语法突出显示功能的 HTML、CSS 在线文本编辑器?

    我想让 css 文件可以从任何地方 家庭 办公室等 访问并准备好编辑 并保存 我将进行手工编码 只想语法突出显示并保存在网络设施上 我尝试了谷歌文档 这很好 因为我可以在线保存 而且它也有修订历史记录功能 这很有用 但它没有语法突出显示 也
  • jQuery:根据鼠标位置移动的全屏“背景”图像[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在尝试实现一个根据鼠标位置移动的全屏背景 例如 如果您将鼠标移动到左上角 视口将显示图像的左上角以
  • 单击按钮滚动到特定 div

    我有一个具有固定菜单和内容框 div 的页面 单击菜单时 内容框滚动到特定 div 到目前为止 一切都很好 这是这里的示例 https jsfiddle net ezrinn 8cdjsmb9 11 https jsfiddle net e
  • 如何检索 JQuery 数据表的排序状态

    我对 JQuery Datatables 还很陌生 我正在尝试检索有关数据表的两个信息 当前正在对哪个列索引进行排序 也称为选择 排序顺序 升序或降序 不知道我应该如何解决这个问题 使用 jquery 查找列索引 或者 Datatables
  • Shiny 中的模态对话框:可以调整宽度但不能调整高度

    在我的 Shiny 应用程序中 我有几个来自闪亮BS 包的模式窗口 我可以像这样调整这些模式窗口的宽度 tags head tags style HTML modal lg width 1200px abs 1 background col
  • 如何减少 VS Code 中选项卡手柄的高度?

    在 的帮助下this https github com be5invis vscode custom css扩展 您可以更改 VS Code 的样式 我想将 filetabs 的高度减少到 20px 我正在使用这样的东西 editor gr
  • iPhone 4 上不稳定的 CSS3 动画

    我有一个非常简单的 或者至少我认为是 动画 我所做的只是 webkit background size 的动画 bubble position relative width 397px height 326px background url
  • 表格固定标题和第一列 css/html

    我有一个包含大量行和列的表 但我想固定标题和第一列 这是我需要的图片 只有粉色部分必须水平和垂直滚动 但其他部分在滚动过程中必须保持可见 我的表位于 div 中 首先 我应该使用一张桌子还是四张桌子 蓝色桌子 红色桌子 绿色桌子和粉色桌子
  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • Zurb 基金会粘性页脚

    我想使用 Foundation 4 拥有粘性页脚 并且我想使用 HTML5
  • Chrome 和 Safari 错误::不允许加载本地资源: file:///D:/CSS/Style.css

    当我在 chrome 或 safari 中访问我的 aspx 页面时 它在控制台中显示此错误 不允许加载本地资源 file D CSS Style css 在 IE 和 FF 中一切正常 我使用外部 CSS 通过 aspx 页面链接 我已经
  • 如何选择一个元素但排除其子元素

    我明白 div hover not class 作品 但是 如何实现 LI 元素的 悬停 效果 但排除鼠标悬停在LI内的某个 DIV 上时的悬停效果 E G li Hello div Bye div li 我想获得 li 的悬停效果 li
  • 设置引导工具提示上的箭头样式[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下方式设置工具提示样式 tooltip inner 但我遇到了麻烦 因为我找不到如何设置工具提示小箭头的样式 如屏幕截图所示 工具提示的箭头是黑色的 我想在其上添加新颜色 any suggesti
  • JQuery 设置动态最大宽度

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

随机推荐

  • 扭曲的http客户端

    我正在寻找一个描述 Twisted 的 HTTP 客户端用法的示例 看完优秀的关于 Twisted 内部结构的博客文章 http krondo com blog page id 1327 我了解 工厂 和 协议 组件如何发挥作用 但我不清楚
  • 在键盘上方显示整个底部工作表并使用 EditText

    我正在实现一个 UI 其中底部工作表将出现在键盘上方 并带有一个 EditText 供用户输入值 问题是视图与键盘部分重叠 覆盖了底部工作表的底部 这是底页 没有键盘 这是显示键盘的底页 确保显示整个底页的最佳方法是什么 Thanks 只是
  • 如何将 JQuery Datepicker 与 Django 模板语言结合使用

    看着这个链接 https stackoverflow com questions 9594081 how to use jquery ui datepicker as a django widget并找到了一些帮助 但我想知道如何选择对 m
  • 如何学习 Jackson 来转换抽象类的继承者?

    我有一堂课 EqualsAndHashCode callSuper true Data public class AppealTemplateDto extends AbstractDto private List
  • 为什么我在尝试批量打印变量时收到“Echo is on”

    我尝试执行一个简单的批处理文件脚本 echo 1 set var 1 echo var 当我在 XP 中运行它时 它给出了预期的输出 但是当我在 Vista 或 Windows 7 中运行它时 我在尝试打印 回显 值时收到 Echo is
  • 在 MATLAB 中仅查找相关点

    我有一个 MATLAB 函数可以查找样本中的特征点 不幸的是 它仅在大约 90 的时间内有效 但是 当我知道应该查看样本中的哪些位置时 我可以将其提高到几乎 100 所以我想知道MATLAB中是否有一个函数可以让我找到大部分结果所在的范围
  • GetPrivateProfileInt-仅读取默认值

    我正在尝试读取 C 中包含内容的 init 配置文件 IP地址 IP地址 169 254 115 22 扫描配置 扫描频率 2500 扫描分辨率 2500 起始角度 700000 停止角度 1100000 到目前为止 我已经使用这段代码来读
  • 有效检查数据帧是否具有范围内的日期,并返回计数

    假设我们有一个数据框df包含按日期按时间顺序排列的日期列表 目标是获取给定日期内包含给定日期的日期范围的人数 df pd DataFrame data date datetime date 2007 12 1 datetime date 2
  • 在启用 IAM 登录的情况下通过 cloud-sql-proxy 从 Cloud Run 连接到 Cloud SQL

    我想使用服务帐号从 Cloud Run 连接到 Cloud SQL 实例 连接过去是在 VPC 内创建的 我们只需提供一个带有user and a password到我们的 PostgreSQL 客户端 但现在我们希望身份验证由 Googl
  • 在 lubuntu 15.04 上构建 Kurento

    我正在尝试在我的 lubuntu 15 04 上构建整个 Kurento 与 ubuntu 15 04 相同 但 UI 不同 我首先克隆所有存储库 mkdir kurento cd kurento git clone https githu
  • 通过redux改变状态后如何更新React组件?

    我正在学习 React 和 Redux 在学习的同时 我决定制作一个带有按钮的网页 单击该按钮就会改变状态 在按钮下方 我想在不同的组件中显示当前状态 虽然单击按钮会更改状态 但它不会反映在组件中 这是我的代码 App js import
  • 如何查看整个表

    我正在尝试使用 quandl 获取表 数据集 该表有 5 行 X 12 列 但在输出中仅显示 4 列 其余列被 3 个点替换 我使用Python编写了以下代码 import quandl df quandl get WIKI GOOGL p
  • printf("%f",x) 好的,printf("%F",x) 错误格式参数过多

    当我在 CodeBlocks 中使用说明符 F 时 为什么编译器会给出错误 格式参数过多 include
  • app.config 转换

    我非常喜欢添加web config 转换 http msdn microsoft com en us library dd465318 aspx在 Visual Studio 2010 中 另请参阅Scott Hanselman 最近在 M
  • 牛找到长栅栏间隙的算法

    我正在看这个挑战 一头名叫萨姆的近视奶牛在目前的牧场上找不到足够的草 它记得牧场的围栏有一个缺口 不幸的是 栅栏很长 要绕一整圈 Sam 需要沿着栅栏走几步 山姆只能看到间隙就在它旁边 记住牛是近视的 在本题中 您将设计不同的算法 使 Sa
  • 无法配置 CMake 来查找 Bison 的 Homebrew 安装版本

    我正在运行 macOS 10 14 并且安装了bison版本 3 2 与brew 但它拒绝链接 brew link bison force Warning Refusing to link macOS provided software b
  • struts2 将 URL 传递给 Action

    我读了struts手册通配符映射 http struts apache org 2 1 8 1 docs wildcard mappings html并决定自己测试一些例子 我有一个行动指向
  • 创建 Liferay portlet 配置页面

    我正在尝试为 Liferay portlet 创建一个配置页面 以便我可以为其设置一些参数 例如 我想选择控制器在查看时应显示哪个页面 配置应位于此处 所以我为配置创建了一个控制器 如下所示 import com liferay porta
  • 学习WPF和MVVM

    我最近加入了一个新的开发项目 使用 WPF 和 MVVM 构建胖客户端应用程序 我在各种 NET 框架 从 1 1 到 3 5 以及所有主要技术中开发过应用程序 WebForms MVC 和 WinForms 在我所有的项目中 我都很享受其
  • 如何仅在 3 边应用盒子阴影? [复制]

    这个问题在这里已经有答案了 我在下面使用我的 CSS 页面 他在 4 边应用了方框阴影 我希望它只应用于右侧 底部和左侧 如何仅在 3 边应用框阴影 webkit box shadow 0 0 10px rgba 0 0 0 0 22 mo