数据可视化中CSS实现四个边⾓特效实现
在数据可视化⼤屏中，我们看到⼈家的到做的很炫酷，如下图，中div四个边⾓的特殊颜⾊边⾓是怎么实现的呢，下⾯本⼈通过两种⽅式进⾏实现。
⽅式⼀
css特效文字
<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中可以⽤滤镜实现渐变
1. 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);
1. 执⾏效果如下
四个边⾓具体实现代码
<body>
<div class="rect"></div>
</body>
<style type="text/css">
.rect {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background: linear-gradient(to left, #02a6b5, #02a6b5) left top no-repeat,    linear-gradient(to bottom, #02a6b5, #02a6b5) left top no-repeat,
linear-gradient(to left, #02a6b5, #02a6b5) right top no-repeat,
linear-gradient(to bottom, #02a6b5, #02a6b5) right top no-repeat,
linear-gradient(to left, #02a6b5, #02a6b5) left bottom no-repeat,
linear-gradient(to bottom, #02a6b5, #02a6b5) left bottom no-repeat,
linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat,
linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat;
background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
background-color: #00FF00;
}
</style>
执⾏以后具体效果为

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。