底部的圆形内阴影

Question

我想在我的圆形div的底部半圆上有内部阴影，但阴影似乎在错误的边缘移动。

Js Fiddle

从代码中起作用的重要部分：

box-shadow: inset 3px 3px 3px -1px #000;

我想要的与小提琴中的那些略有不同：

有些人可能会将此称为插图阴影。

Answer 1

这就是你的意思：

.floating-circle{
border-radius: 50%;
background-color: blue;
width: 100px;
padding-top: 100px;
position: absolute;
box-shadow: inset 0 -3px 3px #000;
}

编辑，所以也许是这样，但没有模糊：

.floating-circle{
    border-radius: 50%;
    background-color: #00008B;
    width: 100px;
    padding-top: 100px;
    position: absolute;
    overflow: hidden;
}

.floating-circle::after{
    border-radius: 50%;
    background-color: blue;
    width: 100px;
    padding-top: 100px;
    content:'';
    position: absolute;
    bottom:5px; 
    left:0;
}

主要元素应为“阴影”颜色，伪元素应为您的主要颜色

第3次尝试：P模糊，当然你可以操纵模糊量，pesudo元素宽度/高度和位置以适当的内部阴影：

.floating-circle{
    border-radius: 50%;
    background-color: #00008B;
    width: 200px;
    height: 200px;
    position: absolute;
    overflow: hidden;
}

.floating-circle::after{
    border-radius: 50%;
    width: 220px;
    height: 220px;
    content:'';
    position: absolute;
    bottom:-5px; 
    left:-10px;
    box-shadow: inset 0 -20px 10px rgba(0,0,0,0.5);
}

我恐怕总会有一些小文物，但是有一些技术可以让它们不那么明显，翻译Z（0）或类似的东西 - 自己尝试一下：）

使用百分比值编辑：

.floating-circle{
    border-radius: 50%;
    background-color: #00008B;
    width: 70%; /*can be %/px/vw or anything else */
    height: 70%; /*can be %/px/vw or anything else */
    position: absolute;
    overflow: hidden; /*disable this to better see what exactly is happeing with shadow*/
}

.floating-circle::after{
    border-radius: 55%;
    width: 110%;
    height: 110%;
    content:'';
    position: absolute;
    bottom:-5%; 
    left:-5%;
    box-shadow: inset 0 -20px 10px rgba(0,0,0,0.5);
}

你现在可以将.floatin-circle width / height设置为百分比值或像素值，阴影应该总是很好 - 你可以通过rgba不透明度颜色“调整”阴影量或者上下移动它“底部“价值或玩箱影道具：）