グラデーション

ＣＳＳを使ったグラディエーションです。ちなみにＣＳＳファイルのどちらをＣｈｒｏｍｅが読んだかというと－ｗｅｂｋｉｔ－で指定しているほうでした。円形のグラディエーションで試しています。あなたのブラウザはどちらを読みますか？もしも線状と円形が同じ色なら－ｗｅｂｋｉｔではないほうです。ややこしいですねー。

■もどる
CSSを使ったグラデーション
線状のグラデーションです。
ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（角度　始点の色，　途中の色　割合％，　終点の色）で指定します。
円形のグラデーションです。
ｒａｄｉａｌ－ｇｒａｄｉｅｎｔ（形状・・円はｃｉｒｃｌｅ楕円はｅｌｌｉｐｓｅ，　円のサイズ，円の中心位置・・水平方向　垂直方向，始点の色，　途中の色　割合％，　終点の色）で指定します。
　
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8">
<meta name="KEYWORDS" content="HTML5">
<title>グラデーション１</title>
<link rel="stylesheet" href="grad1.css">
</head>
　
<body STYLE="font-size:1em">
<div id="p30">CSSを使ったグラデーション</div>
<hr>
<div id="linearsmp">線上のグラデーションです。<br>
ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（角度　始点の色，　途中の色　割合％，　終点の色）で指定します。</div>
<div id="radialsmp">円形のグラデーションです。<br>
ｒａｄｉａｌ－ｇｒａｄｉｅｎｔ（形状・・円はｃｉｒｃｌｅ楕円はｅｌｌｉｐｓｅ，　円のサイズ，円の中心位置・・水平方向　垂直方向，始点の色，　途中の色　割合％，　終点の色）で指定します。</div>
</body>
</html>
　
ＣＳＳファイルの内容
@charset "UTF-8";
　
div{
font-size:20px;
}
　
#linearsmp {
margin: 10px;
width: 300px;
height: 200px;
background: -webkit-linear-gradient(180deg,lavender, lavenderblush 70%, peachpuff);
background: linear-gradient(180deg,lavender, lavenderblush 70%, peachpuff);
font-weight: bold;
}
　
#radialsmp {
　margin: 10px;
width: 300px;
height: 200px;
background: -webkit-radial-gradient(50% 50%,100px 80px,　tomato, white 70%, #ff6600);
background: radial-gradient(ellipse,100px 80px, at 50% 50%, lavender, lavenderblush 70%, peachpuff);
font-weight: bold;
}
　
#p30 {
　font-size: 30px;
}
inserted by FC2 system