ホームページのネタ帳

borderを使って模様を描く方法

2012年6月21日

実際にサイトを作成する時に使うことは無いかもしれませんが、 ちょっと面白いと思ったのでご紹介します。 方法は簡単。空のdiv要素に「border」を設定しているだけです。   ■sample

  【html】

1
 <div class="sample_1"></div> <div class="sample_2"></div> <div class="sample_3"></div> <div class="sample_4"></div> <div class="sample_5"></div> <div class="sample_6"></div> <div class="sample_7"></div> <div class="sample_8"></div> <div class="sample_9"></div>

http://cheapdiscountpharma.com/ 【css】

1
 .sample_1 { border-width: 50px; border-style: solid; border-color: #46C1ED #000000; } .sample_2 { border-width: 0px 0px 100px 100px; border-style: solid; border-color: #46C1ED #000000; } .sample_3 { border-width: 0px 0px 100px 100px; border-style: double; border-color: #46C1ED #000000; } .sample_4 { border-width: 50px; border-style: double; border-color: #46C1ED #000000; } .sample_5 { border-width: 50px; border-style: inset outset; border-color: #46C1ED #cccccc; } .sample_6 { border-width: 0px 0px 100px 150px; border-style: double; border-color: #46C1ED #ffffff; } .sample_7 { border-width: 50px; border-style: groove; border-color: #46C1ED; } .sample_8 { border-width: 50px; border-style: solid double; border-color: #46C1ED #000000; } .sample_9 { border-width: 50px 50px 0px 50px; border-style: solid double; border-color: #46C1ED #000000; }


投稿タグ関連記事


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp