border-image-repeat属性是用于指定图像边框是否应被重复(repeated)、拉伸(stretched)或铺满(rounded)的。

CSS3 border-image-repeat属性

作用:规定图像边框是否应该被重复(repeated)、拉伸(stretched)或铺满(rounded)。

语法:border-image-repeat: stretch|repeat|round|space;

stretch:表示拉伸图像来填充区域

repeat:表示平铺(重复)图像来填充区域。

round:类似 repeat 值;如果无法完整平铺所有图像,则对图像进行缩放以适应区域。

space:类似 repeat 值。如果无法完整平铺所有图像,扩展空间会分布在图像周围

说明:border-image-repeat属性规定如何延展和铺排边框图像的边缘和中间部分。因此,您可以规定两个值。如果省略第二个值,则采取与第一个值相同的值。

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

CSS3 border-image-repeat属性的使用示例

div {

margin:50px;

border: 30px solid transparent;

border-image: url('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');

border-image-slice: 25;

}

.round{

border-image-repeat: round;

}

.repeat{

border-image-repeat: repeat;

}

.stretc{

border-image-repeat: stretc;

}

DIV 使用图像边框--round

DIV 使用图像边框--repeat

DIV 使用图像边框--stretc

效果图:

html的img标签repeat,border-image-repeat属性怎么用相关推荐

  1. html 图片repeat,html中repeat技术分享

    backgroundrepeat 属性 主体内容,如何在水平方向重复背景图像. CSS里的 no-repeat 是什么意思 html background-repeat:no-repeat; < ...

  2. HTML img 标签的 border 属性

    定义和用法 <img> 标签的 border 属性规定图像周围的边框的宽度,就是说可以增加或去掉图像的边框. 注释:默认地,图像是没有边框的(除非图像在 a 元素内部). 浏览器通常会把代 ...

  3. jQuery对象,jQuery查找标签,层级选择器,属性选择器,表单筛选器,操作节点标签事件...

    目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器 表 ...

  4. 前端JavaScript DOM BOM 自学复盘 D1(DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数)

    内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...

  5. Vue中的style标签的lang=“ “和scpoed属性

    Vue中的style 的lang=" "和scpoed属性 普通的 style 标签只支持普通的样式,如果想要启用 scss 或 less ,需要为 style 元素,设置 lan ...

  6. HTML5 script 标签的 crossorigin 和integrity属性的作用

    Bootstrap 4 依赖的基础库中出现了两个新的属性 1 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim ...

  7. ueditor html显示图片,百度ueditor编辑器上传图片后img标签的title、alt属性优化简单方法...

    <百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法>要点: 本文介绍了百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法,希望 ...

  8. 在Asp.Net MVC中实现RequiredIf标签对Model中的属性进行验证

    在Asp.Net MVC中可以用继承ValidationAttribute的方式,自定制实现RequiredIf标签对Model中的属性进行验证 具体场景为:某一属性是否允许为null的验证,要根据另 ...

  9. html css integrity,HTML5 script 标签的 crossorigin 和integrity属性的作用

    Bootstrap 4 依赖的基础库中出现了两个新的属性 1 2 3 HTML5 新的规定,是可以允许本地获取到跨域脚本的错误信息,但有两个条件:一是跨域脚本的服务器必须通过 Access-Contr ...

  10. log4j2.xml 的标签 loggers 中 root 的属性 level 指的是什么

    log4j2.xml 的标签 loggers 中 root 的属性 level 指的是什么   log4j2.xml 是 log4j2 中的其中一种配置文件.log4j2.xml 中往往有如下配置: ...

最新文章

  1. python循环队列_关于循环队列的一些讲解
  2. jquery ajax 样例
  3. tango with django(第三章 Django基础)
  4. 124angular1实现无限表单(仅供自己看)
  5. 算法一看就懂之「 堆栈 」
  6. Jquery+asp.net实现Ajax方式文件下载实例代码
  7. logstash增量读取mysql中的数据到es中
  8. STM32打印log--使用J-Link RTT Viewer
  9. 关于setTimeout的面试题
  10. 统计学之算术平均数、调和平均数、几何平均数、位置平均数详解
  11. 雷电9模拟器安装抓包工具whistle证书
  12. ADF Faces Core 标记库信息
  13. YOLOv7移植经验分享
  14. 基于Matlab的多线激光中心坐标值提取
  15. 模拟看门狗如何实现?
  16. Scala 获取时间,时间戳,时间差
  17. 转:MSN君最后的十个瞬间
  18. IBM-142-XML认证
  19. Office文档背景变成黑色 - 解决方案
  20. python中fit_Python sklearn中的.fit与.predict的用法说明

热门文章

  1. 信息安全 数据赛 铁人三项_[信息安全铁人三项赛总决赛](数据赛)第二题
  2. 斐讯k3搭建nginx+php+MariaDB(mysql )的教程
  3. dom4j解析dom示例
  4. cancase vector_低價替代Vector CANoe CAN總線適配解決方案支持所有USBCAN(周立功CAN、PCAN、Kvaser、ValueCAN、NI CAN)...
  5. English Learning - L3 综合练习 1 VOA-Color 2023.04.26 周三
  6. 推荐一个好的博客下载工具
  7. Tomcat 的下载与安装教程
  8. 使用python将doc的word文件转换成docx文件
  9. Shell中判断字符串是否为数字的6种方法
  10. [单片机框架] [kv_sys] 实现一个简易KV键值系统(最终版)