数据可视化中CSS实现四个边角特效实现
在数据可视化大屏中，我们看到人家的到做的很炫酷，如下图，中div四个边角的特殊颜色边角是怎么实现的呢，下面本人通过两种方式进行实现。
方式一
<body>
<h1 class="title">css实现矩形边角加粗h1>
<div class="main">
<span>span>
<span>span>
<span>span>
<span>span>
div>
body>
具体的CSS3样式为下面，这里面用到了css3中新加的:nth-child选择器。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.title {
color: greenyellow;
}
.main {
position: relative;
width: 400px;
height: 200px;
border: 1px solid red;
}
.main span:nth-child(1) {
position: absolute;
left: -5px;
top: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 5px 0 0 5px;
}
.main span:nth-child(2) {
position: absolute;
right: -5px;
top: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 5px 5px 0 0;
}
.main span:nth-child(3) {
position: absolute;
right: -5px;
bottom: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 0 5px 5px 0;
}
.main span:nth-child(4) {
position: absolute;
left: -5px;
bottom: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 0 0 5px 5px;
}
预览后效果为
方式二
利用background: linear-gradient实现
inear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从下到上渐变。
css3渐变有两种，一种是线性渐变，语法是linear-gradient();一种是径向渐变，语法是radial-gradient();对于不同的浏览器可采用不同的前缀实现效果，ie中可以用滤镜实现渐变
linear-gradient用法举例
/* 从上到下，蓝色渐变到红色 /
linear-gradient(45deg, blue, red);
/ 渐变轴为45度，从蓝色渐变到红色 /
linear-gradient(45deg, blue, red);
/ 从右下到左上、从蓝色渐变到红色 /
linear-gradient(to left top, blue, red);
/ 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
执行效果如下
四个边角具体实现代码
<body>
<div class="rect">div>
body>
执行以后具体效果为
