ソファー
【css】body{/*ソファー柄の背景(赤)*/
background-size:100px 100px;
background-color:#c00;
background-position:50px 50px,0 0,0 0,0 0;
background-image:
radial-gradient(#f44 1px,#c00 3px,#a00 8px,#b00 8px,rgba(204,0,0,0) 13px),
radial-gradient(#f44 1px,#c00 3px,#a00 8px,#b00 8px,rgba(204,0,0,0) 13px),
linear-gradient(45deg,rgba(100,0,0,0.1),rgba(204,0,0,0) 10%,rgba(204,0,0,0) 40%,rgba(255,0,0,0.4) 50%,rgba(100,0,0,0.1) 50%,rgba(204,0,0,0) 60%,rgba(204,0,0,0) 90%,rgba(255,0,0,0.4)),
linear-gradient(-45deg,rgba(100,0,0,0.1),rgba(204,0,0,0) 10%,rgba(204,0,0,0) 40%,rgba(255,0,0,0.4) 50%,rgba(100,0,0,0.1) 50%,rgba(204,0,0,0) 60%,rgba(204,0,0,0) 90%,rgba(255,0,0,0.4));
}
適宜必要なプロパティを追加してくださいこんな感じのゴージャスな枠が合いそうです。詳しくは→
額縁
【html(直接css)】
<div style="border-style:solid;border-width:5px;border-color:#fd3 #d92 #b72 #d92;background:#fb3;padding:5px;"><div style="border-style:solid;border-width:3px;border-color:#b72 #d92 #fd3 #d92;background:#fb3;padding:5px;"><div style="border-style:solid;border-width:2px;border-color:#b72 #d92 #fd3 #d92;background:#fb3;padding:3px;"><div style="padding:5px;background-color:#ffd;color:#630">枠内の文字</div></div></div></div>
TOP≫SUB≫CSS実験室
＊前←114→次＃