*

CSS3の「border-image」プロパティを使ってborderが斜線の枠を作る

   

b
あまり使う機会はないかもしれませんが、上記のようにDIVの枠線をデザインしたい場合に使用します。

1)背景用の画像を作成する。今回は60px*60pxのサイズで作成しました。
(※3で割れるサイズで画像を作成した方が良いらしいです)

2)HTMLとCSS

//HTML
<div class="box01">
	<p>柄ボックス柄ボックス柄ボックス柄ボックス柄ボックス</p>
</div>
//CSS
.box01 {
	padding:10px;
	width:300px;
	height:100px;
	//いつも通りのborderの指定
	//border-image非対応のブラウザではこの指定が反映されます
	border: 6px solid #666;
	//border-image:画像パス サイズの指定 くり返しの指定
	border-image:url(img/borderimg.gif) 10 10 round;
}

・先にborder-imageプロパティが非対応のブラウザ用に通常のborder指定をします。
ちなみに、ie10以下は非対応らしいです。ほぼダメっすね。

・次にborder-image指定でそれぞれを指定。画像パスはわかるのですがそれ以外について追記しておきます。

・「10 10」の部分ですが、どうやらborder部分に表示される画像サイズの指定のようです。
今回であれば、
60px*60pxで作成した画像の10px*10px部分をくり返し表示
という感じでしょうか。
b01

・くり返し指定のプロパティは、今回はroundを使用してます。
くり返し指定の種類は全部で4種類あるようです。

くり返し指定の種類についての参考サイト:
http://www.htmq.com/css3/border-image-repeat.shtml

なので、今回の例でいうと
6pxのborderに60px*60pxで作成した画像の10px*10px部分を(6pxのborderに)ぴったり合わせて表示
ということかなと思います。
(※わかりにくかったので、私はそのように解釈しました。)

スポンサードリンク

ちなみにサイズ部分の数値を変更するとまた変わるので、使用するときは色々試してみた方がよいかと思います。

サイズの部分が「10 10」と「20 20」の場合
b02

//HTML
<div class="box01">
	<p>サイズのとこが「10 10」の場合</p>
</div>
<div class="box02">
	<p>サイズのとこが「20 20」の場合</p>
</div>
//CSS
.box01 {
	padding:10px;
	width:300px;
	height:100px;
	border: 6px solid #666;
	border-image:url(img/borderimg.gif) 10 10 round;
}
.box02 {
	padding:10px;
	width:300px;
	height:100px;
	border: 6px solid #666;
	border-image:url(img/borderimg.gif) 20 20 round;
}

DEMOで確認する

やや癖がある感じはしますが、スマホサイトなどはブラウザの制約があまりないので使えそうな気はします。

だいぶん参考にさせていただいたサイト:
border-image の使いどころや注意点
CSS3のborder-imageで、しましまの目立つ枠線を作る
【CSS3】 border-image を試してみた。

追記:
border-imageを早速スマホサイトで使ってみてたのですが会社のAndroidの標準ブラウザは非対応でした。
そういえば参考サイトにもそのようなことが載っていたような。。(Android4.3以下は正常に動かないこともあるそうな。。)
ということで、今回はやむなくdivの2重囲みで対応。
しばらくは仕事で使うのは難しいのかな~という印象でした。

 -design, Web

Sponsored link

Sponsored link

  関連記事

WebデザイナーもiPhoneアプリ作れるとな。

http://appliya-inc.com/ja/oem/ プログラムがわかんなくてもアプリ作れちゃう時代がくるらしい

Windows版Safari5.1.7をダウンロードしたい→でも自己責任でお願いします

AppleがWindows版Safariの開発を終了してから、しばし経ちます。 「WindowsでSafariとか使わん

基本にかえってバリデートチェックをしてくれるwebサービス

とりあえず、バリデートチェックとは? バリデートチェック: HTMLやCSSが正しく書かれているかチェックする HTML

jqueryを使用したチェックボックスの一括選択・一括解除

またチェックボックスネタで恐縮なんですが、jqueryでの書き方が分かりやすかったのでメモです。

no image

Tweener開発終了らしい

つい昨日そんな記事を見かけたのですが。 Tweenerの終焉 おぉ残念 確かに個人が開発するには、かなり負担な気はします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ