web 中怎么实现斜线表头效果？

果是自己用 table 实现的表格，可以用下面的两个方法：

1. 直接做一个带有斜线和文字的图片，在 html 中引用。

缺点：要求图片大小能和格子大小相同。页面做了自适应的功能的话，图片上的线可能会失真，效果不够理想。

2. 用 css3 的标签 canvas，将其作为画布画一条斜线。

缺点：会存在浏览器兼容性问题，如果只需要在 chrom 中使用可以考虑。

其实现在大部分项目中做表都会用报表工具，工具中就基本都有这个功能了，设置方式也很简单，润乾报表中只要直接点选个按钮就轻松实现效果，也不用担心有什么浏览器兼容的问题，具体可以参考看下文章那些特殊边框效果在报表中要怎样实现？ - 乾学院
文章中除了斜线表头外，还有其他类型的特殊边框效果的实现方法。

标题估计也很难知道什么是斜线拼接，为了快速知道斜线拼接是什么意思，此处省去一堆废话……

这篇文章我们来研究一下用CSS3属性怎么实现下面这张图效果。

上面这图是由两张图构成的，使用的是css3属性mask和linear gradient。没什么难的。通过这个实例我们就能理解这两个属性是怎么用的了。

一、先来显示两张图

DOM结构：

<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>

样式内容：

.wrapper{
position: relative;
width: 360px;
border: 5px solid #fff;
}
.left{
background: url(1.png);
background-size: cover;
width: 100%;
height: 200px;
}
.right{
background: url(2.png);
background-size: cover;
width: 100%;
height: 200px;
}

显示结果是这样的：

这很简单，很好理解，没什么难的，下面开始重点内容了

二、画个斜线

为了实现斜线拼接，你总得有个斜线吧？把下面那个美女图换成一个斜线图。

.right{
background: -webkit-linear-gradient(left top, blue 50%, #ddd 50%);
}

结果变成这个样子的：

没错，美女图不见了，不急，下面我们在换回来。

三、换回美女图

把背景换成真实的美女，渐变图作为mask。

.right{
background: url(2.png);
-webkit-mask-image: -webkit-linear-gradient(left top, blue 50%, #ddd 50%);
}

这个时候又回到了显示两张图的效果。是的，没错，那是因为：

Mask的原理是：它只会把遮罩图里透明像素所对应的原图部分进行隐藏，而我们的渐变是完全不透明的。所以就没有遮罩效果。

现在来改一下mask:

.right{
-webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, #ddd 50%);
}

这样子就对了，效果如下图所示：

四、层叠两张图

给下面那个美女图区加个定位：

.right{
position:absolute;
left:0;
top:0;
}

这样就得到文章一开始的那个两张图拼接的效果了。本文最关键是理清css3属性mask和linear gradient的使用原理，记住文中加粗的那句话。

短内容，说完整事，哪怕只读一篇也能学知识。点击关注小郑搞码事，说的都是那堆代码。谢谢您的鼓励！

言

TypeScript是Javascript的超集，实现以面向对象编程的方式使用Javascript。当然最后代码还是编译为Javascript。

三斜杠指令是包含单个XML标记的单行注释。注释的内容用作编译器指令。

三斜杠指令仅在其包含文件的顶部有效。三重斜杠指令只能在单行或多行注释之前，包括其他三重斜杠指令。如果在声明或声明之后遇到它们，则将它们视为常规单行注释，并且没有特殊含义。

/// <reference path ="..."/>

/// <reference path ="..."/>指令是该组中最常见的。它充当文件之间的依赖声明。

三斜杠引用指示编译器在编译过程中包含其他文件。

它们还可以作为在使用–out或–outFile时对输出进行排序的方法。在预处理传递之后，文件以与输入相同的顺序发送到输出文件位置。

该过程从一组根文件开始; 这些是在命令行或tsconfig.json文件的”files”列表中指定的文件名。这些根文件按照指定的顺序进行预处理。在将文件添加到列表之前，将处理其中的所有三重斜杠引用，并包括其目标。三重斜杠引用按照它们在文件中看到的顺序以深度优先方式解析。

如果无根则，则相对于包含文件解析三斜杠参考路径。

错误

引用不存在的文件是错误的。如果文件具有对自身的三斜杠引用，则会出错。

使用–noResolve

如果指定了编译器标志–noResolve，则忽略三次斜杠引用; 它们既不会导致添加新文件，也不会更改所提供文件的顺序。

/// <reference types="..." />

类似于/// <reference path ="..."/>指令，该指令用作依赖声明; 但是， /// <references types ="..."/>指令声明了对包的依赖性。

解析这些包名称的过程类似于在import语句中解析模块名称的过程。考虑三重斜杠引用类型指令的简单方法是作为声明包的导入。

例如，在声明文件中包含/// <references types ="node"/>声明此文件使用在types/node/index.d.ts中声明的名称; 因此，此包需要与声明文件一起包含在编译中。

只有在手动创建d.ts文件时才使用这些指令。

对于编译期间生成的声明文件，编译器会自动为您添加/// <references types ="..."/>; 当且仅当生成的文件使用引用包中的任何声明时，才会添加生成的声明文件中的/// <reference types ="..."/> 。

/// <reference lib="..." />

该指令允许文件显式包含现有的内置lib文件。

内置的lib文件以与tsconfig.json中的”lib”编译器选项相同的方式引用（例如，使用lib=”es2015”而不是lib=”lib.es2015.d.ts”等）。

对于在内置类型上进行中继的声明文件作者，例如建议使用DOM API或内置的JS运行时构造函数（如Symbol或Iterable，三斜杠引用lib指令）。以前这些.d.ts文件必须添加此类型的前向/重复声明。

例如，将/// <reference lib="es2017.string"/>添加到编译中的一个文件等效于使用–lib es2017.string进行编译。

/// <reference lib="es2017.string" />
 
"foo".padStart(4);

/// <reference no-default-lib="true"/>

该指令将文件标记为默认库。您将在lib.d.ts及其不同变体的顶部看到此注释。

该指令指示编译器不在编译中包含默认库（即lib.d.ts）。这里的影响类似于在命令行上传递–noLib。

另请注意，在传递–skipDefaultLibCheck时，编译器将仅跳过使用/// <reference no-default-lib ="true"/>检查文件。

/// <amd-module />

默认情况下，AMD模块是匿名生成的。当使用其他工具处理结果模块（例如捆绑器（例如r.js））时，这会导致问题。

amd-module指令允许将可选模块名称传递给编译器：

amdModule.ts

///<amd-module name="NamedModule"/>
export class C {
}

将导致将名称NamedModule分配给模块作为调用AMD定义的一部分：

amdModule.js

define("NamedModule", ["require", "exports"], function (require, exports) {
 var C = (function () {
 function C() {
 }
 return C;
 })();
 exports.C = C;
});

/// <amd-dependency />

注意：此指令已被弃用。使用import”moduleName”;而是声明。

/// <amd-dependency path ="x"/>通知编译器需要在结果模块的require调用中注入的非TS模块依赖项。

amd-dependency指令也可以有一个可选的name属性; 这允许传递amd依赖的可选名称：

/// <amd-dependency path="legacy/moduleA" name="moduleA"/>
declare var moduleA:MyType
moduleA.callStuff()

生成的JS代码：

define(["require", "exports", "legacy/moduleA"], function (require, exports, moduleA) {
 moduleA.callStuff()
});

最后

以下是总结出来最全前端框架视频，包含： javascript/vue/react/angualrde/express/koa/webpack 等学习资料。

【领取方式】

关注头条前端全栈架构丶第一时间获取最新前端资讯学习

手机用户可私信关键词【前端】即可获取全栈工程师路线和学习资料！

在线咨询

上一篇：16个超牛逼的HTML5和JavaScript特效
下一篇：Node.js实现将文字与图片合成技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商