问题标签 [box-shadow]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
789 浏览

javascript - 有没有办法在页面加载时自动启动 css 过渡或动画?

我想再次将我的盒子阴影从黄色更改为黑色和黄色,然后重复该过程。我不介意有人给我一个 java 脚本答案,我只是想知道该怎么做。

0 投票
1 回答
518 浏览

css - 盒子阴影、透视、溢出和背面可见性的非常奇怪的错误:隐藏在 Google Chrome 中

我最近在 Google Chrome 中遇到了一个非常奇怪的渲染行为。如果您使用此小提琴中描述的 CSS 的确切组合(过渡除外,仅用于演示目的):

https://jsfiddle.net/yjtpjstx/1/

你可以让元素看起来比它们实际的位置更低和更靠右。如果您的元素具有任何透视、任何溢出(隐藏、自动、滚动 - 它们都可以)和带有模糊的框阴影,并且您的元素具有backface-visibility: hidden那么该子元素内的所有内容都会出现向下移动和右侧为父框阴影中定义的像素数量。元素实际上仍然在它们应该在的地方,它们只是在视觉上移动。尝试单击小提琴中的按钮,并注意它实际上位于父级的左上角,并带有阴影。

关于这里到底发生了什么以及如何解决它的任何想法?在 Firefox 中不会发生。暂时我不得不删除透视,但我在真实情况下有一些动画现在看起来很枯燥没有透视。可能可以摆脱阴影并以其他方式制作它,我可能会,因为我认为这无法解决,但我只是想与世界分享这个,简短的谷歌搜索似乎并不表明之前遇到过.

0 投票
1 回答
202 浏览

css - CSS3 filter:opacity(X) 回退到 opacity:X,同样适用于 filter:drop-shadow() 到 box-shadow

我想开始使用当前正在开发的 CSS3 filter:opacity() 和 filter:drop-shadow() 属性,因为我读到它们在某些机器上的某些浏览器中是硬件加速的。但在这个早期阶段,我肯定需要回退到普通的 CSS 属性,如不透明度和框阴影。

问题是,在旧的之后放置新的正常 CSS 后备策略失败了。通常新的(如果支持)会覆盖旧的。但在这种情况下,新旧是完全不同的属性,它们会结合起来!CSS 声明...

...将导致总不透明度为 25% 而不是 50%。

示例: https ://jsfiddle.net/uq4ybvk8/

有什么方法(最好只有 CSS)来创建从新过滤器属性到完善的 CSS 属性的后备?

0 投票
1 回答
956 浏览

html - Firefox 无法正确显示带有边框半径的插入框阴影

我在侧边栏的顶部有几个按钮。第一个和最后一个按钮有一个圆角,以匹配侧边栏的边缘。当 时.active,按钮应该有一个插入框阴影。在 Chrome 中,这可以正常工作。然而,在 Firefox 中,box-shadow 不跟随边界半径,而是有一个尖角。我做错了什么,或者这是 Firefox 呈现阴影的方式中的错误?顺便说一下,这是适用于 Ubuntu 的 Firefox 41.0.1。

我无法发布屏幕截图(公司政策),但我已经提出了一个小提琴(帖子末尾的链接),您应该能够看到问题。

我已经搜索了几天,没有发现任何其他描述这种相同行为的问题。

这是HTML:

和CSS:

还有JSFiddle(请注意,fiddle 还包含一个小 jQuery 以使按钮可点击)。

0 投票
1 回答
635 浏览

android - Android和盒子阴影属性

我有以下代码来制作盒子阴影:

它不适用于Android。我正在运行 4.4.2 和 Chrome 45。

0 投票
2 回答
540 浏览

css - Box-Shadow 仅在 3 个 div 的特定边界上

我已经在 CSS 上苦苦挣扎了几个小时。

我正在尝试box-shadow在我的网站的一个由 3 个 div 组成的元素上添加 :#top #content#bot.

这是一张图片,可以帮助您想象我处理的内容: 在此处输入图像描述

box-shadowdiv 的左侧和右侧设置#content是一种简单的部分,但我真的在为顶部和底部而苦苦挣扎。我不能做出任何看起来相当干净的东西。

这是我的代码:

有什么想法能让这个东西更“干净”吗?

快速编辑:box-shadowbot 部分在我的屏幕上实际上看起来并没有那么糟糕,我发现了一些更好的设置,但由于尝试不同的配置而丢失了。

0 投票
2 回答
2291 浏览

html - 使用css创建的三角形的框阴影

我有以下plunker,我使用 CSS 创建了一个三角形。

CSS:

HTML:

在我的 AngularJS 项目中,这个三角形是在我调用此处定义的下拉指令时创建的。

问题是我想给这个三角形和下拉菜单一个盒子阴影。我可以将它应用到弹出窗口(本质上只是一个“ul”列表),但我正在努力处理三角形。如何将框阴影应用于三角形?

0 投票
1 回答
6034 浏览

html - css 3 盒子阴影左上下下

嘿伙计们,我在玩 CSS box-shadow 属性,我有点挣扎。我试图在一个盒子上创建阴影,但我只想在我的 div 的顶部、底部和左侧应用阴影。

到目前为止,这是我的 css 代码,但它将适用于我不想要的所有 4 个方面。

谢谢

0 投票
2 回答
14430 浏览

css - 从 div 的底部删除框阴影?

我在格式化页脚时遇到问题,因为主要内容 div 的框阴影正在覆盖它并使它看起来很糟糕。

我查看了其他一些与我有类似问题的人的来源,并尝试了一些“解决方案”,但似乎没有一个能解决我的问题。

在此处输入图像描述

我想知道的是有一种方法可以使用 CSS 仅从底部移除阴影,或者有一种方法可以将我的页脚 div 向前移动,以便隐藏底部阴影。

这是盒子阴影的代码。

提前致谢。

0 投票
2 回答
163 浏览

html - 盒子阴影在 Chrome 中是黑色的,但在 Firefox 中是白色的?

其实问题很简单,我的影子在谷歌浏览器里是黑色的,在火狐里是白色的,应该是黑色的。如果您有不同的意见,请务必说出来,因为我还是一名学生。

这是我的 HTML 代码:(它是荷兰语,但它只是为了让您可以看到无政府状态。)

我的 div 类的 CSS 代码rechts