背景をグラデーションにして、文字枠をつける

＊コピーして、貼りつける場合は改行の隙間を詰めて下さい☆

①solid

グラデーションの中に、分も書けちゃいます。半角スペースを入れると改行されるんです☆ 是非試してみてください♬

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:solid #FF2B60 3px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#FFBF80,endcolorstr=#EA7500,gradienttype=0);' ``グラデーションの中に、分も書けちゃいます。 半角スペースを入れると 改行されるんです☆ 是非試してみてください♬||

　　　　　　　　　　　　横幅↓(最大560)　↓文字色　　　↓文字位置　　　 ↓枠の高さ　↓枠の種類
||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:solid

↓枠の色 ↓枠の太さ
#FF2B60 3px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr

　　↓始まりの色　　　　↓終わりの色　　　 ↓(縦にグラデーション)　　　　半角スペースで改行↓
=#FFBF80,endcolorstr=#EA7500,gradienttype=0);' グラデーションの中に、分も書けちゃいます。半角スペースを入れると改行されるんです☆ 是非試してみてください♬||

②dashed

グラデーションの中に、分も書けちゃいます。半角スペースを入れると改行されるんです☆ 是非試してみてください♬

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:dashed #001B6A 3px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#2BFFCA,endcolorstr=#007495,gradienttype=0);' ``グラデーションの中に、分も書けちゃいます。 半角スペースを入れると 改行されるんです☆ 是非試してみてください♬||

③double

グラデーションの中に、分も書けちゃいます。半角スペースを入れると改行されるんです☆ 是非試してみてください♬

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:double #FF99CC 6px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#FF5580,endcolorstr=#FF0039,gradienttype=0);' ``グラデーションの中に、分も書けちゃいます。 半角スペースを入れると 改行されるんです☆ 是非試してみてください♬||

④ridge

グラデーションの中に、分も書けちゃいます。半角スペースを入れると改行されるんです☆ 是非試してみてください♬

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:ridge #53006A 3px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#8095D5,endcolorstr=#002BAA,gradienttype=0);' ``グラデーションの中に、分も書けちゃいます。 半角スペースを入れると 改行されるんです☆ 是非試してみてください♬||

⑤dotted

グラデーションの中に、分も書けちゃいます。半角スペースを入れると改行されるんです☆ 是非試してみてください♬

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:dotted #D56A00 6px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#BFFF00,endcolorstr=#00AA2B,gradienttype=0);' ``グラデーションの中に、分も書けちゃいます。 半角スペースを入れると 改行されるんです☆ 是非試してみてください♬||

⑥inset

グラデーションの中に、分も書けちゃいます。半角スペースを入れると改行されるんです☆ 是非試してみてください♬

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:inset #00C6FF 6px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#8455FF,endcolorstr=#740095,gradienttype=0);' ``グラデーションの中に、分も書けちゃいます。 半角スペースを入れると 改行されるんです☆ 是非試してみてください♬||

例）幅(width:400px)と高さ(line-height:40px)を変える

グラデーションの中に、分も書けちゃいます。半角スペースを入れると改行されるんです☆ 是非試してみてください♬

||<#FFFFFF' style='width:400px;color:white;text-align:center;line-height:40px;border:double #FF8000 6px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#FF5555,endcolorstr=#BF0000,gradienttype=0);' ``グラデーションの中に、分も書けちゃいます。 半角スペースを入れると 改行されるんです☆ 是非試してみてください♬||

＊【gradienttype=0】を【gradienttype=1】に変えたら、横のグラデーションになります

転載元: ☆ほんの独り言日記☆