box-shadow相关内容

盒子阴影悬停过渡闪烁

我正在尝试通过使黑色背景从左到右来使 box-shadow 像 img 上的幻灯片动画一样工作.但是如果没有这个奇怪的闪烁问题,我就无法做到.我已经在 Stack Overflow 上寻找解决方案. 我也试过用section代替img,但结果是一样的. 这里是 JSFiddle 演示 HTML CSS 部分{边框:黑色 1px 实心;宽度:500 像素;高度:2 ..
发布时间:2022-01-22 22:27:05 前端开发

React Native:将阴影应用于视图外部而不应用于内部视图

这是我的页面的样子 我试图只在红线所在的地方得到阴影 我不希望内部元素有阴影,尤其是文本.我还希望阴影出现在视图下方. 这就是我的视图样式 myOuterView: {边框宽度:1,边界半径:2,边框颜色:'#ddd',边框底部宽度:0,阴影颜色:'#000',shadowOffset: { 宽度: 0, 高度: 1 },阴影不透明度:0.8,阴影半径:2,海拔:1,左边距: ..
发布时间:2021-07-23 20:06:06 前端开发

当父元素溢出隐藏时显示子元素的框阴影?

你可以在这里看到我遇到的问题:https://jsfiddle.net/xa6b8qmm/ 我使用 overflow: hidden 因为我想隐藏滚动条 然而,这隐藏了左 &元素的右阴影. 我找不到隐藏滚动条同时允许 box-shadow 属性的左侧/右侧可见的方法. 有什么想法吗? CSS: .noscrollbar {位置:相对;向左飘浮;高度:300px;宽度 ..
发布时间:2021-06-13 19:33:53 前端开发

在React Native中使用框阴影创建UI

我正在尝试在React Native中创建一个UI,该UI包含一个带有外部阴影的框.使用我已经完成的图像,但是有什么正确的方法吗? 文档).例子: boxWithShadow:{海拔:5} iOS 在iOS中,您具有更大的灵活性,请使用Shadow道具(请参见 docs ).例子: boxWithShadow:{shadowColor:“#000",shadowOffset ..
发布时间:2021-04-26 19:21:25 其他开发

CSS3 Box阴影大小–百分比单位?

我正在一个需要使用CSS3 box-shadow属性的项目中.很好,但是我发现不能将阴影的散布大小设置为父对象的百分比. 我完全理解盒影不是可加的,因此它不以父级的大小为参考. 但是考虑到我需要拥有一个完全响应的站点,并且对象可以流畅地缩放(不仅在断点上),但这也带来了一个问题–我可以设置阴影以仅以绝对单位(em或px)散布属性 对此有什么解决办法吗?我曾考虑过在容器内使用内部容 ..
发布时间:2021-04-26 19:20:37 前端开发

如何仅使用CSS创建透视阴影?

我知道CSS中的 box-shadow 属性,但这会产生一个阴影,看起来像是投射在元素后面的墙上。我需要创建一个阴影,看起来像元素正像这样站在地面上: 这是我到目前为止的内容: div {display:inline-block;高度:150px;宽度:150像素;背景:url(// placehold.it/150x150);左边距:20px; box-shadow:-5px 5p ..
发布时间:2020-10-12 19:54:25 前端开发

CSS Shadow box ::使用边框方法在arrox之后

我正在尝试通过这种设计实现几个要素: 我也希望具有这样的边界半径: 我设法做到的事情: 对于第一个div,我没有设法为:: before箭头创建内部框阴影,而为:: after箭头进行框阴影 对于上一个div,我设法做到了,但是当我尝试更改箭头的大小以使其变大时,框阴影不起作用e ... body {background-color:white;}。test {ma ..
发布时间:2020-10-12 19:46:50 前端开发

CSS“反向边界半径”外部元素的边框创建手机缺口设计

我正在尝试使用HTML和CSS创建看起来像手机的东西,并且希望相机具有类似“倒置边框半径”的功能,以使其与框架平滑连接。 我不能只是将其放大并用白色背景的伪元素遮盖不需要的区域,因为屏幕内容可能并不总是白色。 此外,我不能在同一元素上使用 mask-image ,因为“倒置的半径”实际上会超出边界框,所以我实际上会增加面积而不是减去面积(加上支撑确实很低)。 如果可能的话,我想避 ..
发布时间:2020-10-12 19:43:26 前端开发

滚动时Chrome 51上出现奇怪的Box-shadow错误

因此,在创建网站时,我在Chrome 51上发现了一个奇怪的 box-shadow 错误,但我的网站有一个固定的标头,其中包含 box-shadow ,当我向上或向下滚动时,阴影阴影会留下一些标记(水平灰线): 我也无法在jsfiddle上重现此错误(小提琴的链接)和其他浏览器(例如Firefox或Internet Explorer)。 这是一个错误吗?可能是什么问题? 更新1 ..
发布时间:2020-10-12 05:47:46 前端开发

仅CSS旋转没有原始元素的盒子阴影

我有一个小问题,我想为图片创建45度阴影。但是,如果我使用代码,我的对象也会旋转。因此,我想寻求有关此问题的帮助。 我的代码: .item { box -shadow:-50px 80px 4px 10px#555; -webkit-transform:旋转(10deg); -moz-transform:旋转(10deg); -o-transform:旋转(10deg) ..
发布时间:2020-10-12 02:31:43 前端开发

在颤动的容器底部添加阴影?

我有一个简单的屏幕,其中装有一个高度约100的容器,颜色为蓝色。我想在容器底部添加阴影或高程。 这是我的下面的代码 import'package:flutter / material.dart'; 导入“ package:finsec / utils / strings.dart”; 导入“ package:finsec / utils / dimens.dart”; imp ..
发布时间:2020-10-08 21:00:11 其他开发

双框/边框? CSS可能吗?

我正在尝试在CSS中重新创建此图像. 到目前为止,这是我从实验中得到的.我用盒子阴影作为第二个盒子.我不确定是否有更好的方法可以做到这一点? h4 { font-family: sans-serif; text-transform: uppercase; text-align: center; border: solid 3px black; border-ra ..
发布时间:2020-07-19 08:06:31 前端开发

CSS三角形和阴影框

我用CSS完成了下图: 如您所见,三角形具有一个间隙,可从工具提示中切出阴影. 代码如下: /* Generated by less 2.5.1 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Demo of the tool-tip CSS */ .tooltip { text ..
发布时间:2020-07-19 08:02:38 前端开发