CSS 阴影作为图像

Question

我有这3个盒子

它们的构造方式如下:

    <ul class="home_boxs">
        <li class="home_box light_blue">
        <div class="news clearfix"></div>
        </li>
        <li class="home_box blue">
        <div class="news clearfix"></div>
        </li>
        <li class="home_box dark_blue">
        <div class="news clearfix"></div>
        </li>
    </ul>

我现在要做的是在每个框下方添加一个小阴影图像(自定义 png)。实现这一目标的最佳方式是什么？一些建议将不胜感激。

查看示例:

Answer 1

你可以这样做:

ul {
    list-style: none;
}
li {
    float: left;
}
.home_box {
    position: relative;
    width: 150px; /* to change with your size */
    height: 100px;
    /* To add more styling according to your needs */
}
.home_box:before {
    content:' ';
    position: absolute;
    width: 100%;
    height: 10px;
    background: url(//placehold.it/150x10); /* placeholder */
    border-radius: 50%;
    bottom: -20px;
}

或者，如果您不想使用图片:

.home_box:before {
    content:' ';
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: #999999;
    border-radius: 50%;
    bottom: -20px;
    box-shadow: 0 0 10px #999999;
}

Example带图片 - Example无图