2

嘿，我正在努力用 CSS 创建多色背景。我试过gradient了，但它会产生我不想要的阴影。我想用 CSS 创建这个：

我想用 CSS 创建的示例

有谁知道如何在没有我使用时得到的阴影的情况下创建它gradient。

这是我的html代码。

<div id="head">
        <h1>Mira's place</h1><br>
        <h2><span id="quote">Mira is creating huge game named Rock Paper!</span></h2>
        <ul>
            <li>Home</li>
            <li>Games</li>
            <li>Applications</li>
            <li>Contact</li>
        </ul>    
</div>
4

3 回答 3

4

使用渐变再试一次，但使用以下代码：

#head /* or body */
{
        -webkit-background-size: 40px 40px;
        -moz-background-size: 40px 40px;
        background-size: 40px 40px;         
        background-image: -webkit-gradient(linear, left top, right bottom,
                                color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
                                color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
                                to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);

         -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
         -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);       
         box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
         width: 100%;
         border: 1px solid;
         color: #fff;
         padding: 15px;
         position: fixed;
         _position: absolute;
         text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

顺便说一句：我从 www.red-team-design.com 获得此代码。这是链接。

于 2013-03-26T20:18:29.717 回答
2

不知道，你说的阴影是什么意思。以下内容看起来不像您想要的吗？（可能需要一些修改，但它显示了要走的路）

background: linear-gradient(135deg, #ffffff 0%,#ffffff 25%,#0011ff 25%,#0011ff 35%,#ffffff 35%,#ffffff 65%,#ff0000 65%,#ff0000 75%,#ffffff 75%,#ffffff 100%);

这是小提琴。

于 2013-03-26T20:18:13.110 回答
1 
.element{
    border-bottom: 25px solid #2C58DF;
    border-top: 25px solid #D71E26;
    height: 25px;
    width: 150px;
    -webkit-transform-origin: top left;
    -webkit-transform: translateX(165px) translateY(55px) rotate(135deg);
    -moz-transform-origin: top left;
    -moz-transform: translateX(165px) translateY(55px) rotate(135deg);
    transform: translateX(165px) translateY(55px) rotate(135deg);
    transform-origin: left top 0;
}

http://jsfiddle.net/etW25/

于 2013-03-26T20:17:32.057 回答