1、先谈谈css能实现的自定义边框

（直接上图）

这是一个自定义的边框图。会发现、如果简单的强行当背景图片使用，然后撑满整个元素，在元素宽高比例不同的情况下、会出现图片拉伸情况（这里大家都能想到、我就不出代码展示直接上图）

如图：width: 100px; height: 50px时出现了不想要的变形（不好看了）

（用css解决）：border-image属性（边框图属性）。

border-image的5种属性（按顺序如下）

border-image-source：定义边框图像的路径；
border-image-slice：定义边框图像从什么位置开始分割；
border-image-width：定义边框图像的厚度（宽度）；
border-image-outset：定义边框图像的外延尺寸（边框图像区域超出边框的量）；
border-image-repeat：定义边框图像的平铺方式。

（这里的属性就不一一介绍了，有需要的百度或者给楼主留言）

一个简单的例子：

<div class="box">


.box {width: 200px;border: 25px solid rgba(0, 0, 0, 0);height: 100px;border-image: url(./7.png) 88 round;}

效果如图：非常好看不变形，只是四条边被相应的拉长了。这时又会提出新的疑问、如果图我不想变，但是我觉得红色不好看。我要绿色。

变色：filter:drop-shadow(滤镜投影)

注：filter(滤镜)存在多种属性。我们只讲本节的实现属性。

filter:drop-shadow的4中属性（按顺序如下）

color: 颜色
offx: X轴偏移量
offy: Y轴偏移量
positive: boolear ---- true为所有非透明像素建立可见投影。false与true相反。

（最后一个属性可用png不带底色的镂空照片进行测试下。）

边框变色例子：

.box {width: 200px;border: 25px solid rgba(0, 0, 0, 0);height: 100px;border-image: url(./7.png) 88 round;filter: drop-shadow(green 260px 0);transform: translateX(-260px);}

<div class="box">

效果如图：效果实现，将红色自定义边框在不变形的情况下进行了大小调整、颜色改变（原理：生成颜色投影，然后将图片本体移出可视范围即可得到变色）

以上是css自定义边框实现的过程。

2、canvas实现自定义边框

鉴于浏览器兼容等原因。运用canvas也可实现上面的效果。

思路是将边框图切下一个角、和一条边。然后进行顺时针的平铺，最后染色的过程。

代码封装如下、可直接使用快餐。

// canvas生成边框
// 参数、id:绑定id  X:绘画区域的宽度  Y:绘画区域的高度  img1:边框角图  img2:边框边图
// color:填充颜色rgb数组形式如黑色：[0,0,0]
const getFaceBorder = (id, x, y, img1, img2, color = null) => {var cv = document.getElementById(id);var ctxs = cv.getContext("2d");ctxs.clearRect(0, 0, x, y);Promise.all([loadImage(img1), loadImage(img2)]).then((imgs) => {// 参数 1：要绘制的 img   参数 2、3：绘制的 img 在 canvas 中的坐标 参数4,5是width，height// 5. 旋转转换，改变画笔的旋转角度// ctxs.rotate((45 * Math.PI) / 180);// 6. 调用绘制图片的方法把图片绘制到canvas中// 自定义图片的大小var canvasTemp = document.createElement('canvas');var contextTemp = canvasTemp.getContext('2d');canvasTemp.width = 20; // 目标宽度canvasTemp.height = 20; // 目标高度contextTemp.drawImage(imgs[1], 0, 0, 20, 20)ctxs.drawImage(imgs[0], 0, 0, 20, 20);ctxs.fillStyle = ctxs.createPattern(canvasTemp, "repeat-x");ctxs.fillRect(19, 0, x - 38, 10); //填充画布ctxs.translate(x, 0);ctxs.rotate((90 * Math.PI) / 180);ctxs.drawImage(imgs[0], 0, 0, 20, 20);ctxs.fillStyle = ctxs.createPattern(canvasTemp, "repeat-x");ctxs.fillRect(19, 0, y - 38, 10); //填充画布ctxs.translate(y, 0);ctxs.rotate((90 * Math.PI) / 180);ctxs.drawImage(imgs[0], 0, 0, 20, 20);ctxs.fillStyle = ctxs.createPattern(canvasTemp, "repeat-x");ctxs.fillRect(19, 0, x - 38, 10); //填充画布ctxs.translate(x, 0);ctxs.rotate((90 * Math.PI) / 180);ctxs.drawImage(imgs[0], 0, 0, 20, 20);ctxs.fillStyle = ctxs.createPattern(canvasTemp, "repeat-x");ctxs.fillRect(19, 0, y - 38, 10); //填充画布ctxs.translate(y, 0);ctxs.rotate((90 * Math.PI) / 180);if (color) {var imageData = ctxs.getImageData(0, 0, x, y);var length = imageData.data.length;for (var index = 0; index < length; index += 4) {imageData.data[index] = color[0];imageData.data[index + 1] = color[1];imageData.data[index + 2] = color[2];}// 更新新数据ctxs.putImageData(imageData, 0, 0);}})
};// 实例化promise
const loadImage = (url) => {return new Promise((resolve) => {const img = new Image();img.src = url;img.setAttribute("crossOrigin", 'anonymous')img.onload = () => resolve(img);})
};

实现效果跟上面的css实现的大致一样。细节靠参数微调即可

自定义边框的制作与换色（canvas与css3）相关推荐

在PHP当中制作隔行换色的效果以及制作上下翻页的效果！
首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> ...
【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页
文章目录 1.bootstrap基本模板:meta/title,link/script 2.两种布局容器/栅格系统:自动补 3.样式_表格/按钮/图片/表单:class属性,for属性联动 4.组件_ ...
【幻灯片动画制作】Focusky教程 | 如何在Focusky中批量修改字体与换色？
有时候你下载了一个在线模板,发现排版,布局都很好,就是觉得颜色不怎么喜欢, 或是在编辑演示的过程中,你突然发现配色不好看, 这时候如果你一个个去修改字体与颜色,会特别麻烦,在Focusky(也称为&q ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
骂骂咧咧的 fastreport 数据隔行换色
1, 我要吐槽的是, 这破玩意怎么现在还有人在用??? md, 找个文档要找老半天, 还没有, 社区也没有, 还得自己猜 2, 先看数据格式 2.1 数据格式 dataList, 就是我们的数据表, ...
在PPT的时候，发现用Python十几行代码就可以实现Logo换色
@Author:Runsen 最近,在学习PPT设计的时候,需要对下面的Logo进行换色. 这个Logo是字体黑色,背景透明的图片. 如果将上面的Logo直接放在PPT中,由于是黑色的背景,在加上黑色 ...
【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
html简单边框制作--特效文字制作及代码,HTML音画介绍之一--基本原理和边框的制作...
谨以此系列篇献给需要学习HTML代码音画的紫雨朋友们. 晕,写这篇教程,熬了几个深夜.欣慰的是,紫雨的教程是自己用心写出来的,绝不雷同.这是紫雨对朋友的负责. HTML音画最大的好处是简便易学,效 ...

自定义边框的制作与换色（canvas与css3）

1、先谈谈css能实现的自定义边框

（用css解决）：border-image属性（边框图属性）。

变色：filter:drop-shadow(滤镜投影)

2、canvas实现自定义边框

自定义边框的制作与换色（canvas与css3）相关推荐

最新文章

热门文章