MW211 EXIT

devlog
CSS3/枠画像
2018年10月23日
以下のような96px×96pxの画像を用意する。
┌─┬─┬─┐
│┏│━│┓│
├─┼─┼─┤
│┃│  │┃│
├─┼─┼─┤
│┗│━│┛│
└─┴─┴─┘

そして、以下のようなCSSを指定すると。
┌──────────────────────────────────────┐
│div {                                                                       │
│    height          :160px;                                                 │
│    width           :160px;                                                 │
│    background-color:#CCCCCC;                                               │
│                                                                            │
│    border-style    :solid;                                                 │
│    border-width    :32px;                                                  │
│    border-image    :url("画像.png") 32 repeat;                             │
│}                                                                           │
└──────────────────────────────────────┘

以下のように表示できる。
┌─┬─┬─┬─┬─┬─┬─┐
│┏│━│━│━│━│━│┓│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┗│━│━│━│━│━│┛│
└─┴─┴─┴─┴─┴─┴─┘
分類:HTML5+CSS3