基础 CSS 按钮下拉箭头

按钮下拉箭头是网页设计中常用的元素，可以方便用户查看下拉选项或者展开更多内容。下面介绍如何使用基础 CSS 创建按钮下拉箭头。

HTML 结构

首先，我们需要用 HTML 创建一个按钮和一个下拉列表结构。示例如下：

<button class="dropdown-btn">下拉按钮<span class="dropdown-arrow"></span></button>
<ul class="dropdown-list">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

其中，dropdown-btn 类指示该按钮样式是下拉按钮，dropdown-arrow 类指示该元素是下拉箭头。下拉列表的样式由 dropdown-list 类确定。

CSS 样式

接下来，我们使用 CSS 样式定义按钮和下拉箭头的样式。

/* 定义按钮样式 */
.dropdown-btn {
  background-color: #4CAF50; /* 背景颜色 */
  border: none; /* 边框 */
  color: white; /* 字体颜色 */
  padding: 10px 20px; /* 内边距 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 链接样式 */
  display: inline-block; /* 行内块级元素 */
  font-size: 16px; /* 字体大小 */
  margin: 10px 10px; /* 外边距 */
  cursor: pointer; /* 鼠标光标 */
}

/* 定义下拉箭头样式 */
.dropdown-arrow {
  display: inline-block; /* 行内块级元素 */
  margin-left: 5px; /* 左边距 */
  width: 0; /* 宽度为0 */
  height: 0; /* 高度为0 */
  border-left: 5px solid transparent; /* 左边线条 */
  border-right: 5px solid transparent; /* 右边线条 */
  border-top: 5px solid white; /* 上边线条 */
}

/* 定义下拉列表样式 */
.dropdown-list {
  list-style-type: none; /* 列表样式 */
  margin: 0; /* 外边距 */
  padding: 0; /* 内边距 */
  display: none; /* 初始隐藏 */
  position: absolute; /* 定位 */
  z-index: 1; /* 堆栈顺序 */
}

/* 鼠标悬停时改变按钮背景颜色 */
.dropdown-btn:hover {
  background-color: #3e8e41;
}

/* 当鼠标悬停在下拉按钮上时，显示下拉列表 */
.dropdown-btn:hover + .dropdown-list {
  display: block;
}

效果预览

可以在本地的 HTML 文件中加入上述 HTML 结构和 CSS 样式，预览下拉列表效果。

预览效果示例如下：

以上就是实现基础 CSS 按钮下拉箭头的方法，通过 HTML 结构和 CSS 样式配合，可以轻松实现网页中的下拉列表功能。