PCインストラクターの川上です。
現在、私のブログの記事の下に、「読者になる」ボックスが表示されています。
IE10以降でご覧の方は、この背景にグラデーションが表示されています。
通常は、背景をグラデーションにするには、画像を配置するのですが･･･
私の場合は、［CSSの編集］でこのように↓CSSソースを設置しています。
（フリープラグインと連動しています。詳しくはこちらの記事『記事やコメントを読んだ後に『読者になる』を見せるには』をご参照ください。）
/* 記事下へ『読者になる』の枠 */
.readerunder{
border: #bec1c4 2px solid; /* 枠 */
background-color:#FFFFFF; /* 白色*/
background-image: linear-gradient(white,white,white,#c0c0c0);
text-align: center;
padding:10px;
margin:15px 0 30px 0; /* 上 右 下 左 */
border-radius:10px;
}そう･･･
CSS3を使うと、
background-image: linear-gradient(色1,色2,色3,色4,･･･);とするだけでグラデーションができてしまうのです。
（whiteは#FFFFFFでも同じです。）
gradient（グラディエント）はグラデーションのことです。（ネイティブ読みは「グレィディエント」）
さらに･･･
記事中にも、囲い枠にも使えますね。
例えば、
といった囲い枠は
<div style="background-image:linear-gradient(#ffeeee,white,#ffeeee);background-color:#ffeeee; padding:10px; border:2px dotted #ff0000;">○○○<br>●●●<br>□□□<br>■■■</div>で、できますし、
オレンジのグラデーションであれば、
<div style="background-image:linear-gradient(orange,white);background-color:orenge; padding:10px; border:2px dotted orange;">○○○</div>また、ブルーのグラデーションは
<div style="background-image:linear-gradient(blue,white);background-color:blue; padding:10px; border:2px dotted blue;">○○○</div>･･･と、このようにできます。
水色の場合は、こんな感じ↓
（画像表示･･･IE10以降）
（現在のブラウザ表示↓）
○○○
○○○
○○○
○○○
○○○
○○○
○○○
○○○
○○○
<div style="background-image:linear-gradient(#f7fbfc,#d9edf2,#add9e4);background-color:#ffeeee; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #333333; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div>また、右方向へグラデーションをかける場合は、
<div style="background-image:linear-gradient(to right,#8ed1e0,#ffffff);background-color:#8ed1e0; padding:10px; border:2px dotted blue;">○○○</div>のように、「to right」を先頭に付け加えます。
（逆方向は、「to left」になります。）
background-image: linear-gradient(to right,色1,色2,色3,色4,･･･);すると、
ピンクの場合も、このようにできます。
<div style="background-image:linear-gradient(to right,#ff1493,#ffffff);background-color:#ff1493; padding:10px; border:2px dotted #ff0000;">○○○</div>もちろん、色は、色コードでも色名でもお好きなのをお使いいただくと、よいと思います。
ちなみに･･･、
この背景色グラデーションに対応しているブラウザは、
IE10と11、それからFirefox, Chrome, Opera ,Safariの最新バーション、というのは一応確認しています。
IE9以下のブラウザやグラデーションに対応していないブラウザのためには、背景色を指定（background-color）しておくとよいですね。
＜関連記事＞
記事やサイドバーの枠を丸くしたり、背景をグラデーションにするには
その他の囲み枠はこちらの記事をご覧ください↓↓↓
アメブロ 記事内に枠で囲む方法（囲い枠・囲み枠・枠囲い・枠囲み）
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大