css - 如何在一个 div 标签中制作多个背景？

Question

首先:http://jsfiddle.net/83FDf/

我有一个图像设置为我的“菜单”背景...它有蓝色渐变，圆 Angular ，然后在底部有白色，蓝色菜单下有轻微的阴影。

是否可以在一个 div 上使用纯 css 重新创建它？

html:

<div class="main_content"></div>

CSS:

.main_content
{
    width:900px;
    height:auto;
    background:url(http://i.imgur.com/mionT7y.jpg) no-repeat center top #fff;
    margin:0 auto;
    padding:0 0 50px;
}

Answer 1

确实是可以的，请注意阴影和渐变所需的规则数量是由于不同的浏览器需要不同的语法(-moz- 是 Firefox 供应商前缀等)。这里有一些方便的工具，可以轻松实现跨浏览器渐变和框阴影。

• > CSS3 Box Shadow Generator
• > CSS3 Gradient Generator
• > Ultimate CSS Gradient Generator (more options like color stops)

在此处阅读有关线性渐变和框阴影的更多信息:

• > Mozilla developer linear-gradient
• > Mozilla developer box-shadow

jsFiddle

.main_content
{
    width:100%;
    height:auto;
    margin:0 auto;
    padding:0 0 50px;
    /*background-color:#00F;*/

    /* Add rounded border to top left and top right */
    border-top-left-radius:6px;
    border-top-right-radius:6px;

    /* Apply the gradient as a background image */
    background-image: linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -o-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(79,110,189)),
        color-stop(1, rgb(44,188,207))
    );

    /* Apply white shadow on bottom */
    -webkit-box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.75);
    -moz-box-shadow:    0px 4px 10px rgba(255, 255, 255, 0.75);
    box-shadow:         0px 4px 10px rgba(255, 255, 255, 0.75);
}

body {
    margin:0;
    background-color:gray;
}