为边框加上图片

最新推荐文章于 2024-04-29 00:43:46 发布

果汁不要橙子味

最新推荐文章于 2024-04-29 00:43:46 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_37721114/article/details/81231797

前端专栏收录该内容

9 篇文章

订阅专栏

主要关键字：border-image

background和border-image：

background:url(xx.jpg) 10px 20px no-repeat;//图片应用在背景

border-image:url(borderimg.png) 70 repeat;//图片应用在边框

延伸方式：repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复，裁剪是裁剪边上的，四个角保留。Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸），压缩中间的图片，四个角的一般不会被压缩。Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边框图片</title>
<style>
#border_image {
    margin:0 auto;
	height:100px;
	line-height:100px;
	text-align:center;
	font-size:30px;
	width:450px;
	border:15px solid #ccc;
    border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 10 repeat;
	}
</style>
</head>
<body>
<div id="border_image">
镶嵌漂亮的画框
</div>
</body>
</html>

代码结果示意图：