使用css3居中投影，可能吗？

Question

我正在尝试创建以边框为中心的投影，不想将图像用作背景但不确定第一种方法是什么。

不要求编写代码，但如果有人知道如何实现这一目标真的很棒。

我附上一张图片作为参考，如果你发现第一张图片的中心有一个小阴影。

Answer 1

您可以使用伪元素

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>

Answer 2

你引用的影子确实更多。如果你仔细观察它，它实际上是翻转日历页面并使用渐变。必须有很多关于如何做到这一点（这是一种Apple风格）的提示，包括变换和叠加。

更简单的说，hakJav的评论和小提琴是正确的。我修改了jsFiddle

https://jsfiddle.net/5r7vqddt/8/

所以它有点漂亮。 最终，要获得渐变渐变

div3

将是要走的路。我把一个放在同一个小提琴上。我相信有更好的方法可以做到这一点。这是一个css-tricks链接，有一些有趣的例子： css-tricks border gradient examples