css中如何使用border-image属性

css中如何使用border-image属性？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

创新互联服务项目包括永昌网站建设、永昌网站制作、永昌网页制作以及永昌网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，永昌网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到永昌省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

border-image属性是一个是一个简写属性，通过该属性可使用图片来创建边框。

CSS3 border-image属性

作用：使用图片来创建边框

说明：复合属性。设置或检索对象的边框样式使用图像来填充。可以一次性设置： border-image-source，border-image-slice，border-image-width，border-image-outset和border-image-repeat属性的值。

语法：

border-image: source slice width outset repeat|initial|inherit;

参数：

border-image-source：用于指定要用于绘制边框的图像的位置。

border-image-slice：图像边界向内偏移。

border-image-width：图像边界的宽度。

border-image-outset：用于指定在边框外部绘制 border-image-area 的量。

border-image-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

css3 border-image属性使用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(/upload/otherpic45/5af270fd37755429.jpg) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(/upload/otherpic45/5af270fd37755429.jpg) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(/upload/otherpic45/5af270fd37755429.jpg) 30 30 round;		/* Opera */
border-image:url(/upload/otherpic45/5af270fd37755429.jpg) 30 30 round;
}

#stretch
{
-moz-border-image:url(/upload/otherpic45/5af270fd37755429.jpg) 30 30 stretch;	/* Old Firefox */
-webkit-border-image:url(/upload/otherpic45/5af270fd37755429.jpg) 30 30 stretch;	/* Safari and Chrome */
-o-border-image:url(/upload/otherpic45/5af270fd37755429.jpg) 30 30 stretch;	/* Opera */
border-image:url(/upload/otherpic45/5af270fd37755429.jpg) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>
<img src="/upload/otherpic45/5c513adf97e86533.jpg">

<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>

</body>
</html>

感谢各位的阅读！看完上述内容，你们对css中如何使用border-image属性大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。

标题名称：css中如何使用border-image属性
本文地址：https://www.cdcxhl.com/article20/ijhdco.html

成都网站建设公司_创新互联，为您提供自适应网站、微信公众号、虚拟主机、全网营销推广、建站公司、手机网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容