css小知识border-image

css小知识

css 的border-image 属性现在几乎所有的现代浏览器都支持，除了IE10及其以下的版本。

展示效果如下： (该图片通过cloudapp进行添加，有什么好的方法可以交流下)

html 代码如下

  <div class="bi">
        <p>
            一个让人眼前一亮的demo
        </p>
        <p>
            sqrtsix
        </p>
    </div>

css的样式如下：

<style>
        body{
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
        .bi{
            border: 45px solid transparent;
            -webkit-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
            -moz-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
            border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
            font-family: Arial, Helvetica, sans-serif;
            color: #222;
            width:500px;
            margin: 30px auto 30px auto;
            overflow: hidden;
            resize: both;
        }
    </style>

总结

这是一个不错的功能以后要注意总结， 对于border-image属性要真正的使用到项目当中。如果你有不同的意见，可以告诉我，多多交流。