数据可视化中CSS实现四个边角特效实现

最新推荐文章于 2024-04-16 18:47:51 发布

IT瓜哥-杨得朝

最新推荐文章于 2024-04-16 18:47:51 发布

阅读量2.4k

点赞数 1

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/qq_15103197/article/details/110223056

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在数据可视化大屏中，我们看到人家的到做的很炫酷，如下图，中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>

<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>

执行以后具体效果为

IT瓜哥-杨得朝

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
数据可视化中CSS实现四个边角特效实现

在数据可视化大屏中，我们看到人家的到做的很炫酷，如下图，中div四个边角的特殊颜色边角是怎么实现的呢，下面本人通过两种方式进行实现。方式一<body> <h1 class="title">css实现矩形边角加粗</h1> <div class="main"> <span></span> <span></span> <span></span> &
复制链接

扫一扫