使用css3居中放置阴影，可以吗？
使用css3居中放置阴影，可以吗？
提问于 2016-06-28 17:27:18
我正在尝试创建以边框为中心的下降阴影，不想使用图像作为背景，但不确定第一种方法是什么。
不要求编写代码，但是如果有人给出了如何实现这一目标的想法，那就太棒了。
我附上一个图片作为参考，如果你注意到在第一个中心，有一个小阴影。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-28 17:37:28
您可以使用伪元素。
div {
height: 100px;
width: 100px;
border: 1px solid black;
background: white;
position: relative;
}
div:after {
content: '';
border-radius: 50%;
width: 100%;
height: 20px;
top: 80px;
left:0;
position: absolute;
box-shadow: 0px 10px 5px #888888;
z-index: -1;
}<div></div>
Stack Overflow用户
发布于 2016-06-29 23:03:19
你提到的影子真的更多。如果你仔细看它，它实际上是日历页翻转和一个渐变。关于如何使用转换和覆盖(这是一种苹果风格)，一定有很多提示。
更简单地说，hakJav的评论和小提琴是正确的。我修改了jsFiddle
https://jsfiddle.net/5r7vqddt/8/
所以它更漂亮一些。最终，得到一个渐变衰减
border-image:
linear-gradient(to bottom, black, rgb(your container bgColor here)) 20; 会是个好去路。我在同一把小提琴上放了一个。我相信有更好的方法来做到这一点。下面是一些有趣的例子中的css技巧链接：css-花招边框梯度示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38082637
复制相关文章
相似问题
腾讯云开发者
