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

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

2018-06-10 css-demo

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

情報：

<!DOCTYPE html>
<html>
<head>
<title>CSS border-image-width Example</title>
  <style> 
#webref1 { 
    border: 10px solid transparent;
    padding: 15px;
    border-image-source: url("/img/TITL229.png");
    border-image-repeat: round;
    border-image-slice: 30;
    border-image-width: 10px;        
}

#webref2 { 
    border: 10px solid transparent;
    padding: 15px;
    border-image-source: url("/img/TITL229.png");
    border-image-repeat: round;
    border-image-slice: 30;
    border-image-width: 20px;        
}

#webref3 { 
    border: 10px solid transparent;
    padding: 15px;
    border-image-source: url("/img/TITL229.png");
    border-image-repeat: round;    
    border-image-slice: 30;
    border-image-width: 30px;        
}
  </style>
</head>
<body>
<h1>border-image-width CSS プロパティ Example</h1>
<p>border-image-widthプロパティは、ボーダ画像の幅を指定します</p>
<p id="webref1">border-image-width：10px;</p>
<p id="webref2">border-image-width：20px;</p>
<p id="webref3">border-image-width：30px;</p>
<p>元画像</p>
<img src="/img/TITL229.png">
<p>Internet Explorer 10およびそれ以前のバージョンでは、border-image-widthプロパティはサポートされていません</p>
</body>
</html>

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

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

全てリセット

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

2018-06-10css-demo

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

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

Html

Glossary

PHP

JavaScript

JQuery

CSS

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