on:2013年4月10日sponsorsページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。ページ全体を角丸で囲む(スクロール非対応)まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。角丸用の画像コードを見てみましょう。HTMLHTMLは、bodyだけで構いません。border</h1></body>CSS上記の画像をborder-imageに使用します。25px;}デモページ(スクロール非対応)※IEは全てのバージョンでborder-imageが機能しません。1ではスクロール非対応だったので、ページがビューポートより長くても問題ないようにします。1のCSSに、上3行を加えます。Text」ボタンをクリック。ページ全体を角丸で囲む(スクロールバーを変更)美しい角丸ボーダーが設置でき、せっかくなのでスクロールバーもそれにあったものにしてみましょう。Webkit系ブラウザのみの対応ですが、スクロールバーをカスタマイズできます。左:通常、右:カスタマイズ※カスタマイズ版は、角丸ボーダーの内側にスクロールバーがあります。HTMLラッパーを一つ加えます。</div></body>CSS-webkit-scrollbar-thumbでスクロールバーを角丸にあうデザインにします。Text」ボタンをクリック。Posts関連記事が見つかりませんでした。