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

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

2018-06-10 css-demo

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

情報：

<!DOCTYPE html>
<html>
<head>
<title>CSS border-image-slice  Example</title>
  <style>
#webref1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url("/img/TITL229.png") round; /* Safari 3.1-5 */
    -o-border-image: url("/img/TITL229.png") round; /* Opera 11-12.1 */
    border-image: url("/img/TITL229.png") round;
    border-image-slice: 10%;
}

#webref2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url("/img/TITL229.png") round; /* Safari 3.1-5 */
    -o-border-image: url("/img/TITL229.png") round; /* Opera 11-12.1 */
    border-image: url("/img/TITL229.png") round;
    border-image-slice: 20%;
}

#webref3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url("/img/TITL229.png") round; /* Safari 3.1-5 */
    -o-border-image: url("/img/TITL229.png") round; /* Opera 11-12.1 */
    border-image: url("/img/TITL229.png") round;
    border-image-slice: 30%;
}
  </style>
</head>
<body>
<h1>border-image-slice  CSS プロパティ Example</h1>
<p id="webref1">border-image-slice：10％;</p>
<p id="webref2">border-image-slice：20％;</p>
<p id="webref3">border-image-slice：30％;</p>
<p>使用される画像</p>
<img src="/img/TITL229.png">
<p>Internet Explorer 10およびそれ以前のバージョンでは、border-image-sliceプロパティはサポートされていません</p>

</body>
</html>

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

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

全てリセット

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

2018-06-10css-demo

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

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

Html

Glossary

PHP

JavaScript

JQuery

CSS

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