にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:25.

CSS3のborder-imageなら枠線に画像が使えるので、目立つ柄の枠も記述量1行で作成可能

CSS3のborder-imageで、しましまの目立つ枠線を作るCSSで作る枠線というと、従来は「実線・点線・破線・二重線」の4種類だけでした。
でも、CSS3で新しく追加された「border-image」プロパティを使えば、任意の画像を枠線にできます。

例えば、縞模様の画像を枠線に指定して、目立つ「しましま(ストライプ)柄」のボックスを作ったりできます。
小さなイラストで囲まれたボックスなども、指定の規則に沿って枠線用の画像を用意するだけで、簡単に実現できます。
複数のボックスを重ね合わせるようなアクロバットな方法は一切使いません。CSS3のborder-imageプロパティを1つ書くだけで済みます。
その方法を、All Aboutで解説しました。

■『CSS3のborder-imageで、しましまの目立つ枠線を作る』(@All About ホームページ作成)

実線・点線のような「平凡な枠線」ではなく、もっと凝った枠線を引きたい際に便利です。
ぜひ、活用してみて下さい!

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---