Box-Shadow Arc CSS
蚜虫
我正在尝试复制类似于以下内容的内容：
div底部的阴影有些弧度，在中心处较高，然后逐渐变薄。
我想知道是否可以通过CSS中的某种盒形阴影效果来实现。目前，我的div底部有一个框阴影，整个过程一直保持平坦。
当前框阴影的要求：
box-shadow: inset 0 -30px 30px -30px #888888;
任何建议表示赞赏。
格雷格
您可以创建一个伪选择器，该伪选择器将一些内容插入到页面上，使其变圆并向其应用框阴影。注意z-index使其位于父级后面：
http://plnkr.co/edit/UhdRAuJ0VIPHrnufkwm9?p=preview
.shadowy {
position: relative;
width: 100%;
height: 40px;
border: 1px solid black;
margin-top: 100px;
background: white;
}
.shadowy:before {
content: '';
position: absolute;
background: transparent;
top: 0;
left: 10%;
width: 80%;
height: 20px;
box-shadow: 0 0 30px black;
border-radius: 100%;
z-index: -1;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS box-shadow hidden
- 2
CSS Box Shadow像这个网站
- 3
CSS Box-shadow VS溢出隐藏
- 4
CSS过渡不适用于box-shadow属性
- 5
通过CSS将Box Shadow添加到SVG的问题
- 6
如何使用JavaScript设置box-shadow CSS属性？
- 7
在CSS中为tbody添加box-shadow？
- 8
代号一个CSS Box-Shadow无法渲染
- 9
CSS Shadow box ::使用边框方法在arrox之后
- 10
CSS z-index和box-shadow裁剪问题
- 11
CSS box-shadow z-index或更改顺序
- 12
如何使用JavaScript设置box-shadow CSS属性？
- 13
将 box-shadow css 属性添加到 div
- 14
替换 box-shadow
- 15
想要避免使用CSS box-shadow隐藏先前的li元素
- 16
无法使用JQuery为某些元素设置box-shadow CSS属性
- 17
如何使用display：table-row将box-shadow添加到CSS div？
- 18
如何将 box-shadow 设置为具有透明角的图像的 <img> 标签？(CSS)
- 19
在.box-shadow值前面
- 20
Box Shadow在Chrome上消失
- 21
Box Shadow在Chrome上消失
- 22
Rc，Box，Arc的通用指针类型
- 23
Tilde in front of .box-shadow value
- 24
3D Box Shadow效果
- 25
3D Box Shadow effect
- 26
在SwiftUI中实现Box-Shadow
- 27
box-shadow 和 div 的不同半径
- 28
错误位置上的 box-shadow translateZ
- 29
Box-shadow 悬停过渡闪烁
我来说两句