css - 有没有办法在 css 中编码这个阴影？

Question

我想知道是否有任何方法可以用 css 对那个形状的绿色阴影进行编码

Answer 1

您可以堆叠属性的水平和垂直偏移值，box-shadow在两种颜色之间交替并根据需要指定尽可能多的层，例如

 div {
     background: olive;

     box-shadow: 
     0 01px black,
     01px 0 green,
     01px 02px black,
     02px 01px green,
     02px 03px black,
     03px 02px green,
     03px 04px black,
     04px 03px green,
     04px 05px black,
     05px 04px green;

     height: 50px;
     width: 50px;
 }

http://jsfiddle.net/Thcvv/

Answer 2

如果你只是在寻找底部阴影，没有侧阴影，你可以在它下面画一个菱形：

div{
    height:50px;width:50px;
    background-color: #0f0;
    position: relative;
}
div:after{
    content:'';
    background-color: #9F9;
    width: 50px; height: 10px;
    position: absolute;
    bottom: -10px; left: 5px;
    transform: skewx(45deg)
}