*

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

  関連記事

no image

Googlemapにリンクするときのパラメータ(2014年8月)

以前「Googlemapにリンクするときによく使いそうなパラメータ」って記事を投稿しましたけど、そういえばあれからパラメ

Google Analyticsの画面

Google Analyticsの新バージョン トラッキングコードの場所

久しぶりにアナリティクス見たら、新しくなってまた大いに迷う。 1)右端のボタンをクリック 2)アカウントの管理者の名前の

選挙の公式サイトを閲覧してて使いづらいなぁと思った件

あと2日で福岡では「福岡県知事」「福岡県議会議員」「福岡市議会議員」の選挙です。 職場近くでも選挙カーがんがん通ってて目

OGPサンプル画像

OGPの設定

■OGP(Open Graph Protocol)とは 「このページにこんな情報が書かれている」という情報をmetaタグ

CPIサーバー(ACE01)にWordPressをインストールする場合に確認すること

CPIサーバーにWordpressを手動インストールする場合の確認事項やhtaccessの記述についてです。 以前、「C

コメントを残す

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


*

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

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

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

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

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

実は先月で退職しました

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

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