クリエイター：コーディング備忘録ブログ

RSS

コーディング

border-image

2018.04.23

border-imageのプロパティはIE11が対応して、大体のブラウザで使用可能です。

<div class="border_box">
  <p></p>
</div>

.wborder_box {
  width: 300px;
  border-style: solid;
  border-width: 20px 25px 20px 25px;
  -moz-border-image: url(img/border.png) 20 25 20 25 stretch;
  -webkit-border-image: url(img/border.png) 20 25 20 25 stretch;
  -o-border-image: url(img/border.png) 20 25 20 25 stretch;
  border-image: url(img/border.png) 20 25 20 25 fill stretch;
  box-sizing: border-box;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<div class="border_box">

<p></p>

</div>

.wborder_box {

width: 300px;

border-style: solid;

border-width: 20px 25px 20px 25px;

-moz-border-image: url(img/border.png) 20 25 20 25 stretch;

-webkit-border-image: url(img/border.png) 20 25 20 25 stretch;

-o-border-image: url(img/border.png) 20 25 20 25 stretch;

border-image: url(img/border.png) 20 25 20 25 fill stretch;

box-sizing: border-box;

}

20 25 20 25 stretch
使用したい画像ファイルとボーダーのサイズ、ボーダーのパターンを指定できます。
横の数字がボーダーのサイズとなります。

この記事を見た人は次の記事も見ています。

CSS変数

前の記事

メディアクエリ

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

第十七回「パーマリンク設定とアドレス切れ」

2016.04.26

コーディング

擬似要素

2017.01.19

コーディング

カスタムフィールドの値を全ページで取得する方法

2018.02.20

コーディング

WordPressでページに個別CSSを追加する方法

2019.03.13

コーディング

第二十一回「一括置換で時間短縮」

2016.05.09

コーディング

第一回「スワップイメージ」

2016.04.04