css制作三道杠小图标菜单图标

最新推荐文章于 2022-02-12 00:01:18 发布

Khun_HWJ

最新推荐文章于 2022-02-12 00:01:18 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/Khun_HWJ/article/details/98076073

css 专栏收录该内容

37 篇文章

订阅专栏

本文提供了两种使用CSS设计图标菜单的方法。第一种方法利用内联块级显示、边框和背景颜色来创建一个特定尺寸的图标菜单。第二种方法通过不同的边框样式和高度设置展示另一种图标菜单的设计方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

方法一：
.icon-menu {
	display: inline-block;
	width: 140px; height: 10px;
	padding: 35px 0;
	border-top: 10px solid;
	border-bottom: 10px solid;
	background-color: currentColor;
	background-clip: content-box;
}
方法二
.icon-menu {
	width: 120px;
	height: 20px;
	border-top: 60px double;
	border-bottom: 20px solid;
}