border-image-repeat | 実例 CSS プロパティ・セレクタ (1)

border-image-repeat | 実例 DEMO CSS プロパティ・セレクタ (1) | 書き方

2018-06-12 css-demo

border-image-repeat サンプルプログラムコードページ

<!DOCTYPE html>
<html>
<head>
<title>CSS border-image-repeat  Example</title>
  <style> 
#webref1 { 
    border: 15px solid transparent;
    padding: 15px;
    border-image-source: url("/img/TITL229.png");
    border-image-repeat: repeat;
    border-image-slice: 30;
}
#webref2 { 
    border: 15px solid transparent;
    padding: 15px;
    border-image-source: url("/img/TITL229.png");
    border-image-repeat: round;
    border-image-slice: 30;
}
#webref3 { 
    border: 15px solid transparent;
    padding: 15px;
    border-image-source: url("/img/TITL229.png");
    border-image-repeat: stretch;    
    border-image-slice: 30;
}
  </style>
</head>
<body>
<h1>border-image-repeat  CSS プロパティ Example</h1>
<p>border-image-repeatプロパティは、境界線イメージを繰り返すか、丸めるか、または伸張するかを指定します</p>
<h2>border-image-repeat：繰り返し：</h2>
<p id="webref1">ここでは、画像がその領域を埋めるようにタイルします必要に応じてタイルを分割します</p>
<h2>border-image-repeat：round：</h2>
<p id="webref2">ここでは、画像がその領域を埋めるようにタイルしますタイルを分割しないように、必要に応じて画像を再スケーリングします</p>
<h2>border-image-repeat：stretch（デフォルト）：</h2>
<p id="webref3">ここで、画像はその領域を埋めるように引き伸ばされる</p>
<p>ここにオリジナル画像があります：</p>
<img src="/img/TITL229.png">
<p>Internet Explorer 10およびそれ以前のバージョンでは、border-image-repeatプロパティはサポートされていません</p>
</body>
</html>

border-image-repeatサンプル実行結果

：border-image-repeat ・ border-image-repeat, コード関連記事

全てリセット

border-image-repeat | 実例 DEMO CSS プロパティ・セレクタ (1) | 書き方 — border-image-repeat | 実例 CSS プロパティ・セレクタ (1) – WebRef

2018-06-10css-demo

border-image-repeat | 実例 DEMO CSS プロパティ・セレクタ (1) | 書き方

border-image-repeat サンプル プログラム コード ページ

Html

Glossary

PHP

JavaScript

JQuery

CSS

border-image-repeat サンプルプログラムコードページ