边框图片

一、使用场景

盒子大小不一，但是边框样式相同，此时就需要边框图片来完成。

二、边框图片的切图原理：（重要）

把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。（那个角大，就以谁为准来切）

按照上、右、下、左的顺序切割。

三、边框图片语法：（重要）

<style>div{width: 400px;height: 300px;border: 15px solid pink;border-image-source: url(images/border.jpg);/*这个数字是图片切割的高度，第一个格子....，上右下左，记住，一定不要加单位 */border-image-slice: 167 167 167 167;/*这个属性默认的是border的宽度 ，但是有区别，这个是边框图片的宽度，不会挤压文字 */border-image-width: 30px;border-image-repeat: repeat;}</style>

如果用了 border-image-repeat: repeat; ，会出现以下的问题，看下图：（会有些出现不完整），如果你就是想要这种效果，也可以保留。

border-image-repeat 的三种效果如下图所示，可自行选择合适的。

四、公共面板样式开发

因为多处地方都是用这个边框图片，所以直接就封装一个边框图片的样式，哪里需要，哪里就调用就好了。

 <!--  HTML 代码   父容器大盒子 --><div class="viewport"><div class="column"><div class="panel"></div></div><div class="column">2</div><div class="column">3</div></div>

/* css代码 */
/* 封装一个公共面板样式 */
.panel {border: 15px solid red;/* 相当于border-width: 51px 38px 20px 132px; */border-width: .6375rem .475rem .25rem 1.65rem;border-image-source: url(../images/border.png);border-image-slice: 51 38 20 132;
}

注意：
（1）如果我们给了边框的宽度（border-width），我们就不用再给边框图片的宽度（border-image-width）了，会默认和边框宽度一样。
（2）边框宽度的单位需要转换为rem，而切割（border-image-slice）用上图的px数值就好，但是不带单位的哦！！！

会出现的一些问题：

在 .panel 类的 div 里写123123 内容，但是运行结果的123123并不是在边框的左上角位置，而是在切割的位置。

解决办法：把上面的黄色部分内容，给一个子盒子.inner，同时给他绝对定位（因为给他绝对定位也不会盖住边框图片），top、left、right、bottom值都给他拉伸到和父盒子一样的大小，父盒子给相对定位。

最后小结一下代码：

 <!-- HTML代码 父容器大盒子 --><div class="viewport"><div class="column"><div class="panel"><div class="inner">123</div></div></div><div class="column">2</div><div class="column">3</div></div>

/* css代码  公共面板样式 */
.panel {position: relative;border: 15px solid transparent;/* 相当于border-width: 51px 38px 20px 132px; */border-width: .6375rem .475rem .25rem 1.65rem;border-image-source: url(../images/border.png);border-image-slice: 51 38 20 132;margin-bottom: .25rem;
}
.inner{position: absolute;top:-0.6375rem;left: -1.65rem;right: -0.475rem;bottom: -0.25rem;padding: .3rem .45rem;background-color: red;
}

注：所有代码以及图片都来自b站的pink老师的视频，可自行查阅学习

echarts的边框图片之切图（重要）以及公共面板样式的制作相关推荐

echarts的边框图片之切图（重要）
图片边框代码写法,先贴两对代码,均是经过测试可用的都可以实现效果,顺便贴上背景图第一对代码 <div class="boxbig"><div class=&qu ...
python切割图片地图切图脚本
python切割图片地图切图脚本 ''' 读入一个图片,切成指定数目个小图片(64个) 文件夹名out ''' from PIL import Image import sys,os cut_num ...
图格 Pro for mac(图片拼图切图大师)
图格 pro是一款能够实现拼图.美化.添加水印等等多种操作的小工具,软件内有大量相框,拼图模板,水印贴纸等等功能供您使用,可快速制作出精美的照片. 图格 pro安装教程图格 Pro特色功能支持照片 ...
淘晶驰串口屏入门（三）按钮、双态按钮、状态开关、图片、切图、触摸热区
一.按钮控件 1.新建一个按钮控件,注意:b+数字开头的为按钮控件,这是控件的名称,你可以自己修改 2.按钮的点击事件按下事件和弹起事件把按钮想像成你的鼠标,当你点击左键时,触发按下事件,当你放开 ...
python和C++代码实现图片九宫格切图程序（附VS2015配置Opencv教程）
1.python代码实现图片分割成九宫格需要包含的库,没有下载安装的,需要自己安装哦. 实现原理很简单,就是用PIL库不断画小区域,切下来存储成新的小图片. 假设每一个格子的宽和高分别是w.h,那么 ...
图片自动切图java源代码_Sketch 和 PS中的设计图如何实现“自动切图”？
切图是很多UI设计师的一项日常工作.平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感. 但有的认为前 ...
【iOS】iOS开发之使用Mac自动操作制作@1x@2x@3x图片（切图）
iOS开发中,会要求导入@1x.@2x和@3x: 使用@1x格式:iPhone3GS 使用@2x格式:iPhone 4,4S,5,5S,5C,SE,6,6S,7,8,XR 使用@3x格式:iPhone ...
psd格式图片一键切图
转载于:https://www.cnblogs.com/yaomengli/p/7052788.html
Java切图或者判断是不是纯色图片
文章目录一.切图代码: 二.判断是否是纯色图片的代码,稍微改一下可以用来判断是不是彩色图片: 一.切图代码: import java.awt.Rectangle; import java.awt.i ...
CSS布局基础（网页图片切图）
网页图片网页图片图片格式切图直接从 psd 图层导出切片工具切图插件切图其他设计工具网页图片图片格式 jpg/jpeg 高清图 gif 小动画,支持透明背景 png 结合jpg 和 ...

echarts的边框图片之切图（重要）以及公共面板样式的制作

边框图片

一、使用场景

二、边框图片的切图原理：（重要）

三、边框图片语法：（重要）

四、公共面板样式开发

最后小结一下代码：

echarts的边框图片之切图（重要）以及公共面板样式的制作相关推荐

最新文章

热门文章

echarts的边框图片之切图（重要）以及公共面板样式的制作

边框图片

一、 使用场景

二、边框图片的切图原理：（重要）

三、边框图片语法：（重要）

四、公共面板样式开发

最后小结一下代码：

echarts的边框图片之切图（重要）以及公共面板样式的制作相关推荐

最新文章

热门文章

一、使用场景