0

次のメニューを再作成するタスクが与えられました。

ここに画像の説明を入力

グラデーションを作成する方法がわかりません。終わり

コードでそれを確認できないのはなぜですか? http://jsfiddle.net/Vtr6d/

現在私は持っています：

CSS:

.mainOptions{
    float:left;
    margin:0 20px 0 20px;
    color:#fff;
    width:500px;
    height:50px;
    background:gray;
}
.mainOptions .composer{
    width:50px;
    height:40px;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#184C82), to(#022243));
}
.mainOptions .composerIcon{
    display:inline-block;
    width:14px;
    height:14px;
    background:url('../images/composer.png') no-repeat -96px -72px;
}
.mainOptions ul li{
    display:inline-block;
    padding:4px 10px 4px;
    border-radius:4px;
}
.mainOptions li a{
    text-decoration:none;
    font-size:13px;
    line-height:18px;
    text-align:center;
    vertical-align:middle;
}
.mainOptions li{
    width:140px;
    background-color:pink;
}

HTML:

<nav class="mainOptions">
                <ul>
                    <li class="composerIcon composer"><a href="#" style="margin-top: 2px; padding-top: 5px; padding-bottom: 5px;">Composer</a></li>
                    <li><a href="#">Address Books</a></li>
                    <li class="active"><a href="#" target="_self" title="View Messages Scheduled for Future Delivery">Scheduled Messages</a></li>
                    <li><a href="#" target="_self" title="Message Templates for you or your organisation">Templates</a></li>
                </ul>
            </nav>
4

3 に答える 3

1

これをすべてのブラウザで動作させてみてください。

background: #184c82; /* Old browsers */
background: -moz-linear-gradient(top,  #184c82 0%, #022243 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#184c82), color-stop(100%,#022243)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #184c82 0%,#022243 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #184c82 0%,#022243 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #184c82 0%,#022243 100%); /* IE10+ */
background: linear-gradient(top,  #184c82 0%,#022243 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184c82', endColorstr='#022243',GradientType=0 ); /* IE6-9 */
于 2012-05-29T09:42:55.000 に答える
0

勾配発生器を使用しますか? http://gradients.glrzad.com/

手動で行うこともできます：

background-image: linear-gradient(bottom, <color1> 5%, <color2> 53%, <color3>  77%);
background-image: -o-linear-gradient(bottom, <color1> 5%, <color2> 53%, <color3> 77%);
background-image: -moz-linear-gradient(bottom, <color1> 5%, <color2> 53%, <color3> 77%);
background-image: -webkit-linear-gradient(bottom, <color1> 5%, <color2> 53%, <color3> 77%);
background-image: -ms-linear-gradient(bottom, <color1> 5%, <color2> 53%, <color3> 77%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.05, <color1>),
    color-stop(0.53, <color2>),
    color-stop(0.77, <color3>)
);

、<color1>と3<color2>色。必要に応じてパーセンテージを編集することもできます。<color3>rgb(x,y,z)

于 2012-05-28T20:10:59.217 に答える
0 
background-image:       -webkit-linear-gradient(linear,0%,0%,0%,100%,from(#3388FF),to(#296DCC));
background-image:       -webkit-linear-gradient(top,#3388FF,#296DCC);
background-image:       -ms-linear-gradient(top,#3388FF,#296DCC);
background-image:       -o-linear-gradient(top,#3388FF,#296DCC);
background-image:       -moz-linear-gradient(top,#3388FF,#296DCC);
background-image:       linear-gradient(top,#3388FF,#296DCC);

ブラウザの互換性の問題については、それらすべてを使用してください

于 2012-05-28T20:08:41.697 に答える