css3 border-image-repeat属性笔记

原创 PHP笔记  2017-11-26 17:28  阅读 1,269 views 次

定义和使用

1、在php中,border-image-repeat属性是用来设置图像边界重复、拉伸或铺满;

2、border-image-repeat属性可以设置两个参数,规定如何延展和铺排边框图像的边缘和中间部分,如果省略第二个参数,第二个参数的值默认和第一个参数的值相同。

border-image-repeat属性值

  • stretch:拉伸(默认值);
  • repeat:平铺;
  • round:如果无法完整平铺所有图像,则对图像进行缩放以适应区域;
  • space:如果无法完整平铺所有图像,扩展空间会分布在图像周围;
  • initial:将此属性设置为默认值;
  • inherit:从父元素中继承该属性。

语法格式:

border-image-repeat: stretch / repeat / round / initial / inherit;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 border-image-repeat属性笔记</title>
<style>
.repeat{border: 30px solid transparent;border-image: url('https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png');
border-image-slice: 30;border-image-repeat: repeat;}
#repeat1{background-color:#eee; border-image-repeat: stretch;}
#repeat2{background-color:#6ee; border-image-repeat: repeat;}
</style>
<head/>
<body>
<div class="repeat" id="repeat1">
css3 border-image-repeat属性的stretch属性值演示!
</div><br />
<div class="repeat" id="repeat2">
css3 border-image-repeat属性的repeat属性值演示!
</div>
<p>图片原型:</p>
<img src="https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png">
</body>
</html>

运行结果:

注意:Internet Explorer 10, Opera 12, 和 Safari 5 不支持 border-image-repeat 属性。

相关属性——>css3 border-image边框图片属性笔记(可以使用border-image属性来设置所有 的border-image-*属性)

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/border-image-repeat.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情