色を含めて、HTMLでpHスケールを書き込もうとしています。色が酸性からアルカリ性(スケールの上から下)にスムーズに移行するようにしたい。ただし、pHの色は表示されません。これがhtmlコードです:
<!DOCTYPE html>
<html>
<head>
<link rel = "STYLESHEET" type = "text/css" href = "Ph.css">
<title >Ph SCALE</title>
<h1 class = "Ph">THE pH SCALE</h1>
</head>
<body>
<div>
<p class = "zero">0.0 very acidic</p>
<p class = "one">1.0</p>
<p class = "two">2.0</p>
<p class = "three">3.0</p>
<p class = "four">4.0</p>
<p class = "five">5.0</p>
<p class = "six">6.0</p>
<p class = "seven">7.0 neutral</p>
<p class = "eight">8.0</p>
<p class = "nine">9.0</p>
<p class = "ten">10.0</p>
<p class = "eleven">11.0</p>
<p class = "twelve">12.0</p>
<p class = "thirteen">13.0</p>
<p class = "fourteen">14.0 very alkaline</p>
</div>
</body>
</html>
そして、以下は私のCSSコードです。カラーグラデーションに-webkit-gradientを使用しました。
* {
background-color: #ccc;
}
h1.Ph {
background-color: white; font-family: Arial; padding: 20px;
text-decoration:underline;
text-align: center;
}
p {
padding: 5px; margin: 0px;
text-align: center;
}
div {
background-color: -webkit-gradient(top, bottom,rgb(238,62,128), rgb(0,136,221));
font-family: Courier;
}
上から下にカラーグラデーションがない理由を教えてください<div>
。
ありがたいことに