css 中border-image 九宫格怎么理解，，求形象解答，小白不懂

html-css025

css 中border-image 九宫格怎么理解，，求形象解答，小白不懂,第1张

把一张用来做边框的图片横砍两刀，竖砍两刀，就变成一个由九个小图片组成的九宫格，其中四个角的四张图片就是边框的四个角，四条边上的四张图片就用来做边框的四条边。最中间的那个图片是边框包围着的实际内容，不属于边框，所以这张图片是用不到的，因此这个九宫格实际被利用到的就是四周的八张图片。

<!DOCTYPE html>

<html>

<head>

    <meta charset="GBK">

    <title>test</title>

   <style type="text/css">

       *{

           box-sizing: border-box

           margin: 0

           padding: 0

       }

       .container{

           width: 90px

           height: 90px

       }

       .item{

           width: 30px

           height: 30px

           display: block

           float: left

       }

   </style>

</head>

<body>

<div class="container">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

</body>

</html>

<script type="text/javascript">

    var items = document.querySelectorAll('.item')

    Array.prototype.slice.call(items, 0).forEach(function(item){

        item.style.backgroundColor = '#'+(~~(Math.random()*(1<<24))).toString(16)

    })

</script>