前端基础学习之css3-(border-image)实现边框图片自适应填充

border-image 属性允许在元素的边框上绘制图像。

语法：

/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

值	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。(若上右下左四个方向的切割值一样，可以只写一个值)
border-image-width	图片边框的宽度。
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
border-image-outset	边框图像区域超出边框的量。

demo:

1.原图：
用这张图切割作为边框背景，不用工具测量都知道，只需要切割图片宽度/高度三分之一即可。
1.切割示意图
1.效果图：

        .box1{display: none;width: 200px;height: 200px;border: 20px solid rgb(116, 136, 76);border-image: url(img/border01.jpg) 167/20px round;/* 在内容变化的容器可以使用，边框自动填充 */}

☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆

2.原图：

2.切割示意图
2.效果图

        .box2{margin-top: 20px;width: 300px;height: 200px;border: 20px solid yellowgreen;border-image-source: url(img/border2.jpg);border-image-slice: 43 42 38 41;border-image-width: 20px;border-image-repeat: round;}

☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆

3.原图
3.切割示意图
3.效果图

        .box3{margin-top: 20px;width: 200px;height: 200px;background-color: #f6f6f6;border: 20px solid yellowgreen;border-image-source: url(img/border4.jpg);border-image-slice: 80 72 75 72;border-image-width: 20px;border-image-repeat: round;}

☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆

以上三种的border-image-repeat都是round。下面对比一下round/repeat/stretch的区别。

round 字面意思环绕完整的自适应（等比缩放）平铺在边框内
repeat 字面意思重复从边框的中间向两侧平铺自适应平铺但是不是完整的
stretch 字面意思拉长拉伸显示在边框内容这样的效果是变形的

以第一张图片作为边框背景为例：

round:

repeat:

stretch:

前端基础学习之css3-(border-image)实现边框图片自适应填充相关推荐

前端基础学习html部分小结
前端基础学习html部分小结 1 了解知识 1.1 网页的组成 html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片.声音.动画.多媒体等内容.还可以从一 ...
前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础目录一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
文章目录 HTML结构一.标签(标记.元素) 二.列表,表格,表单 1.列表 2.图片 3.超链接--实现不同页面的跳转 4.table表格 5.表单1 --收集用户信息给后端input CSS表现 ...
前端基础学习——Vue框架-AJAX的使用
目录一. AJAX基础 1.1.AJAX简介 1.2.第三方数据接口 1.3.AJAX实例 1.4.AJAX的异步特性二. axios框架 2.1.get方式与post方式请求 2.2.axios ...
【安利】前端基础学习资源
最近在边用vue做一些项目/学校的比赛, 边在补一些之前图快而落下的基础知识. 安利一下在这过程中遇到不错的资源: https://yangbo5207.github.io/wutongluo/ 这波 ...
前端基础学习——带你全面掌握HTML语言
目录一. 认识HTML 1.1 HTML简介 1.2.常用主流浏览器 1.3.前端常用开发工具 1.4 HBuilder或HBuilderX的快捷输入 1.4.1 嵌套 > 1.4.2 并列 ...
框架中的左侧菜单关联右侧页面是如何实现的_前端基础学习：Vue2.0实现移动端外卖平台项目，参考旧版饿了么！...
主要依赖基于vue@2.0 使用vue-cli@2.0搭建项目框架使用vue-router@2.1进行页面路由切换使用vue-resource@1.0.1进行http请求获取数据 mock假数据 ...
npm 卸载_前端基础学习（一）--npm
****************************npm下载镜像********************** 淘宝 NPM 镜像参考引用:http://npm.taobao.org/ 当前 r ...
前端基础学习：javascript表达式，你知道为什么3+true=4吗？
原始表达式原始表达式是最简单的表达式.它是表达式的最小单元. Javascript中的原始表达式有:常量.直接量.关键字.变量. 1.23 //数字直接量 "hello"//字符 ...

前端基础学习之css3-(border-image)实现边框图片自适应填充

语法：

demo:

以上三种的border-image-repeat都是round。下面对比一下round/repeat/stretch的区别。

前端基础学习之css3-(border-image)实现边框图片自适应填充相关推荐

最新文章

热门文章