#FFFFFFの値が線形グラデーションとボックスシャドウで機能しない

値が受け入れられない理由はわかりません。私はさまざまな価値を試してきましたが、何も動いていません。ボックスシャドウは、すべてのいずれか#FFFFFFの値が線形グラデーションとボックスシャドウで機能しない

CSS CSSがオンに参照されているページの

body{ 
    background: #90C7E3; 
    background-image: linear-gradient(#FFFFFF, #90C7E3); 
    color: #666666; 
    font-family: Helvetica;} 

header{ 
    background-color: #000033; 
    color: #FFFFFF; 
    line-height: 60px; 
    text-indent: 1em; 
    text-align: center; 
    background-image: url("sunset.jpg"); 
    background-repeat: no-repeat; 
    background-position: right; 
    padding-top: 15px; 
} 

nav a{ 
    text-align: center; 
    background-color: #FFFFFF; 
    text-decoration: none; 
    font-weight: bold; 
    padding: 10px; 

} 



h2{ 
    color: #3399CC; 
    font-family: Georgia; 
    text-shadow: 1px 1px #CCCCCC; 
} 

h1{ 
    font-family: Georgia; 
    margin-top: 0px; 
} 

h3{ 
    font-family: Georgia; 
    color: #000033; 
} 

dt{ 
    font-family: Georgia; 
    color: #000033; 

} 


ul{ 
    list-style-image: url("marker.gif"); 
} 

footer{ 
    font-family: Georgia; 
    font-style: italic; 
    font-size: 75%; 
    padding: 20px; 
} 

.resort{ 
    color: #5C7FA3; 
    font-weight: bold; 
} 

footer{ 
    text-align: center; 
    padding: 20px; 

} 

.contact{ 
    color: #5C7FA3; 
    font-weight: bold; 
    font-size: 90% 
} 

#wrapper{ 
    background-color: white; 
    width: 940px; 
    max-width: 2048px; 
    box-shadow: 3px, #333333; 

} 

#main-image{ 
    height: 300px; 
    background-image: url("coast-main.jpg"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

#accomodations-image{ 
    height: 300px; 
    background-image: url("bungalow-main.jpg"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 

} 

#activities-image{ 
    height: 300px; 
    background-image: url("hiking-man.jpg"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 

} 

main{ 
    padding: 1px 20px 20px 20px; 

}

一つに現れていません。 CSSコメントセクションを無視しても更新されません。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title> Atlantic Trails Resort</title> 
    <link rel="stylesheet" href="atlantic.css" type="text/css"> 
    <style type="text/css"> 

<!-- 
body{background-color: #FFFFFF;color: #666666; font-family: Helvetica;} 

header{background-color: #000033; color: #FFFFFF; line-height: 400%; text-indent: 1em; 
background-image: url("sunset.jpg");background-position: right;} 

nav{background-color: #90C7E3;} 

h2{color: #3399CC;} 

h3{color: #000033;} 

resort{color: #5C7FA3;} 
    --> 
    </style> 
</head> 

<body> 
    <!-- page content goes here --> 

    <div id ="wrapper"> 
     <header> 
      <h1>Atlantic Trails Resort</h1> 
     </header> 

     <nav> 

      <a href="Index.html">Home</a>&nbsp; 
      <a href="Accommodations.html">Accommodations</a>&nbsp; 
      <a href="Activities.html">Activities</a>&nbsp; 
      <a href="Reservations.html">Reservations</a>&nbsp; 

     </nav> 

      <h2>Enjoy Nature in Luxury</h2> 
      <img src="coast.jpg" alt height="250" width="320"> 
      <p><span class ="resort">Atlantic Trails Resort</span> offers a special lodging experience 
      on the rugged Atlantic North Coast of Maine. Relax in serentiy 
      with panoramic views of the Atlantic Ocean.</p> 

      <ul> 
       <li>Private bunglows with decks overlooking the ocean.</li> 
       <li>Activities lodge with fireplace and gift shop</li> 
       <li>Nightly fine dinning at the Overlook Cafe</li> 
       <li>Heated outdoor pool and whirlpool</li> 
       <li>Guided hiking tours of the pine forests</li> 

      </ul> 
      <div><span class ="contact">Atlantic Trails Resort</span></div> 
      <div>1210 Atlantic Trails Way</div> 
      <div>Cliffside, Maine 04226</div> 

      <br> 
      <div>888-555-5555</div> 
      <br> 





<footer> 

    Copyright &copy; 2016 Atlantic Trails resort<br> 


</footer> 
</div> 
</body> 



</html>

出典

2016-10-16 bojack2424

：ここ

は、私はあなたのコードを編集した方法ですか？ – Microsmsm

私のソリューションはあなたのために機能しましたか？ – ZombieChowder

私は混在した結果を見ています。まず、W3C検証ではエラーとしてカウントしています。ソリューションのリンクでは、グラデーションの背景が見えません。私はメモ帳でコードを実行することでそれを参照してください。第二に、ボックスシャドーイングも機能していません。私は値のエラーを取得しています – bojack2424

これは、適切にCSS勾配をBojackに定義しなかったためです。私はあなたが探しているものをフィドルが提供すると思います。

しかし、あなたは毎日それをやらなければなりません。

JSフィドル：Edited Solution

は、これは私が変更されたものです：

background-image: linear-gradient(#ffffff, #90C7E3); 
    background:#90C7E3; 
    background: -webkit-linear-gradient(-90deg,#ffffff,#90C7E3); 
    background: -o-linear-gradient(-90deg, #ffffff, #90C7E3); 
    background: -moz-linear-gradient(-90deg,#ffffff, #90C7E3); 
    background: linear-gradient(-90deg, #ffffff, #90C7E3);

私は-90degでグラデーションを定義したが、あなたがしたいしかし、あなたはそれを変更することができます。ただ、このリンクをたどって、それが非常によく、それを説明する：

w3schools - gradient CSS

私もシャドウイングボックスを修正しました。値を間違って配置しました。これはあなたが行った方法です：box-shadow: 3px, #333333;値の間に昏睡状態を置くべきではありません。あなたはグラデーションを配置したい場所を

#wrapper{ 
    background-color: white; 
    width: 940px; 
    max-width: 2048px; 
    box-shadow: 3px 3px 5px #333333; 
}

出典

2016-10-16 01:30:33 ZombieChowder

#FFFFFFの値が線形グラデーションとボックスシャドウで機能しない

答えて

関連する問題