https://wikiwiki.jp/sample/cssbox
みほん
BOXプラグイン1
BOXプラグイン2
BOXプラグイン3
BOXプラグイン4
応用
PowderBlue
Khaki
LemonChiffon
HotPink
サーモン
サーモン
サーモン
サーモン
サーモン
| title |
| txt txt txt txt |
おリボン！かわいいけれど、文字を入れると崩壊する
ついでにテキストを第2引数に入れた場合
文字
#cssbox("width: 200px; border: 20px solid; border-color:Turquoise transparent; text-align: center"){{
文字
}}
#cssbox("width: 200px; border: 20px solid; border-color:Turquoise transparent; text-align: center",第2引数に入れた方)
画像をもちいたcssbox
BOXプラグイン
でけた！
わーい
- https://developer.mozilla.org/ja/docs/Web/CSS/border-image-source
- https://developer.mozilla.org/ja/docs/Web/CSS/border-image
border-image
https://developer.mozilla.org/ja/docs/Web/CSS/border-image
- border-image-outset
- 画像が境界ボックスからはみ出す幅を設定
- border-image-repeat
- 元画像の辺の領域と中央の領域を、どうやって要素の境界画像に合うように合わせるかを定義
- border-image-slice
- 指定された画像を複数の領域に分割
- border-image-source
- 境界画像に使われる元の画像を設定
- border-image-width
- 境界画像の幅を設定
引用画像
border-image-source: url('/media/examples/border-diamonds.png');
how
枠を指定
#cssbox("width: 300px; height: 200px; border-width: 30px; border-style: solid;"){{
}}
border-imageを指定
border-image-slice: 30; border-image-repeat: round;
BOXプラグイン
できひん＞＜
わーい
#cssbox("width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png); border-image-slice: 30; border-image-repeat: round;"){{
BOXプラグイン
できひん＞＜
わーい
}}
;){kind=link}
…なお、これだと背景が画像になる
#cssbox("width: 300px; height: 200px; border-width: 30px; border-style: solid; background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png');"){{
}}
;){kind=link}
つまずいていたところメモ
wikiwikiさんぷる改変で何とかしようとしていたやつ
BOXプラグイン
border: 1px solid ;ではなく、
border-style: solid ;で指定
background-image: url('～～～border-diamonds.png') 30 / 19px round;ではなく
border-image: url(～～～border-diamonds.png); border-image-slice: 30;
border-width: 30px;で画像を表示するサイズを指定
border-image-slice
BOXプラグイン
やっほー
BOXプラグイン
#cssbox("width:200px; height: 150px; border-width: 30px; border-style: solid ; text-align: center; border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png); border-image-slice: 30;"){{
BOXプラグイン
やっほー
BOXプラグイン
}}
border-image-repeat
上記＋border-image-repeat: round;
センタリング
わーい
#cssbox("width: 200px; height: 150px; border-width: 30px; border-style: solid; text-align: center; border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png); border-image-slice: 30; border-image-repeat: round;"){{
センタリング
わーい
}}
のこりは
https://developer.mozilla.org/ja/docs/Web/CSS/border-image
参照してちょ