HTML5+CSS3 使用图像边框
在CSS 3中，使用border-image属性，可以让处于随时变化状态标签长或宽的边框，统一使用一个图像文件来绘制。
使用border-image属性，在浏览器中显示图像边框时，会自动将所使用的图像分割为9部分进行处理，不需要再进行人工处理。
1．border-image属性的使用
div border属性border-image属性的使用方法如下：
border-image: url (图片文件路径) A B C D
在上述代码中，border-image属性值至少必须指定五个属性值，其中第一个参数为边框所使用的图像文件的路径，A、B、C、D四个参数表示当浏览器自动把边框所使用到的图像进行分隔时的上边距、右边距、下边距、左边距。
示例：17-8 border-image.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>border-image属性应用</title>
<style type="text/css">
div {
border-image:url(border.png) 20 20 20 20 / 20px;;
padding: 5px;
font-size:24px;
color:#000000;
-moz-border-image:url(border.png) 20 20 20 20/ 20px;
-o-border-image:url(border.png) 20 20 20 20/ 20px;
-webkit-border-image:url(border.png) 20 20 20 20/ 20px;
width:300px;
height:125px;
}
</style>
</head>
<body>
<div> “月上柳梢头，人约黄昏后”，中秋无依之日，世道沧桑，情去节依在，人靠月圆瘦。思念的中秋，总人倍感沉寂和清幽。
</div>
<br>
</body>
</html>
在上述代码中，分别设置上边距、右边距、下边距和左边距为20像素。
2．四条边中图像的显示
使用border-image属性可以指定标签四条边中图像的显示方式，语法如下：
border-image:url（文件路径）A、B、C、D/border-width topbottom leftright;
上述代码中，topbottom表示标签的上下两条边的图像显示方法，leftright表示标签的左右两条边的显示方法。在显示方法中指定的值有三种，介绍如下：
● repeat 图像以平铺的方式进行显示。
● stretch 图像以拉伸的方式进行显示。
● repeat+stretch 将图像上下两条边指定为平铺显示，左右两条边中的图像指定为拉伸显示。或者将图像上下两条边指定为拉伸显示，左右两条边中的图像指定为平铺显示。
● round 与repeat属性类似，将图像进行平铺显示，区别在于如果最后显示的图像不能完全显示，且能够显示的部分不到图像的一半，就不显示最后的图像，然后扩大前面的图像，使显示区域正好完整平铺全部图像。
示例：17-9 border-image1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>border-image属性应用</title>
<style type="text/css">
div {
border-image:url(1.jpg) 20/10px repeat repeat;
-moz-border-image:url(1.jpg) 20/10px repeat repeat;
-o-border-image:url(1.jpg) 20/10px repeat repeat;
-webkit-border-image:url(1.jpg) 20/10px repeat repeat;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div>
</div>
<br>
</body>
</html>
在上述代码中，使用repeat方法将图像以平铺的方式进行显示。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论