css - 关于border-image

为什么我在p元素的内部写入结构时，边框图片就出不来，但是统一p格式时就可以出现呢？

单独p格式：

#p2 {
            -webkit-border-image: url(border.png) 30 30 round;
            border:15px solid transparent;
            width:300px;
            padding:10px 20px;
        }
<p id="p2">
            <span>边框图片</span>
        </p>

结果：

统一p格式：

#p2 {
            -webkit-border-image: url(border.png) 30 30 round;
        }
        p{
            border:15px solid transparent;
            width:300px;
            padding:10px 20px;
        }
<p id="p2">
            <span>边框图片</span>
        </p>

结果：