方框上的圆形框阴影

Question

有了这个：

div {
    width: 200px;
    height: 100px;
    background-color: green;
    box-shadow: 0px 0px 15px #000
}

我得到一个带阴影的矩形。参见 https://jsfiddle.net/df9dfev5/ 问题是阴影有圆角。如何避免这种情况？

Answer 1

https://jsfiddle.net/df9dfev5/1/

div {
    width: 200px;
    height: 100px;
    background-color: green;
    box-shadow: 0 0 0 15px #000;
}

第三个0是模糊半径。当它很低时，盒子阴影不会那么模糊。

Answer 2

这会为您完成 box-shadow: -2px -1px 15px 16px rgba(0,0,0,0.75);

见fiddlehttps://jsfiddle.net/df9dfev5/2/

Answer 3

更少的模糊和更浅的颜色可能是这样的

https://jsfiddle.net/df9dfev5/3/

 div {
    width: 200px;
    height: 100px;
    background-color: green;
    -moz-box-shadow: 0 0 5px 5px #666;
    -webkit-box-shadow: 0 0 5px 5px #666;
    box-shadow: 0 0 5px 5px #666;
}

看这篇文章http://www.css3.info/preview/box-shadow/

Answer 4

我认为首先评估您希望阴影看起来像什么、光线应该来自哪里等很重要。然后您可以确定您的值需要是什么。

您可以更改颜色值本身，而不是使用您的模糊值来照亮阴影颜色。知道您不想拥有不切实际的过度圆角阴影，这意味着您将不得不使用偏移值，这就是为什么确定光线来自何处很重要。

这是我对此的看法：https://jsfiddle.net/df9dfev5/6/

div {
     width: 200px;
     height: 100px;
     background-color: green;
     box-shadow: 3px 6px 2px #bbb
 }

我选择让我的光源来自左上角，大部分来自顶部，所以我将阴影向右偏移 3px 并向下偏移 6px。 2px 模糊可以解释阴影的一些漫反射外观，其余颜色 #bbb（浅灰色）。

方框上的圆形框阴影

Rounded box-shadow on square box

html

css

rounded-corners

dropshadow