css怎么设置图片边框-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

在css中，可以使用border-image属性设置图片边框，只需要给元素添加“border-image:图片路径切割宽度平铺方式;”样式即可。border-image属性可以给边框添加背景图片，实现图片边框效果。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS入门阶段，我们学习了border-style属性，也知道边框只有实线、虚线等几种简单的样式。如果我们想要为边框添加漂亮的背景图片，该怎么做呢？

在CSS3中，我们可以使用border-image属性为边框添加背景图片。现在所有主流浏览器最新版本都支持border-image属性。

语法：

说明：

border-image属性需要定义3个方面的内容。

（1）图片路径。

（2）切割宽度：四条边的切割宽度，依次为上边、右边、下边、左边（顺时针）。

（3）平铺方式：有3种取值，分别为repeat、round和stretch。

在本节所有例子中，我们都是使用图所示的这张90px×90px的图片作为边框的背景图片。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>