要实现一个镂空的内凹圆角边框按钮，实际上是通过 border 和 box-shadow 来模拟按钮的边框和内凹效果。通过一些 CSS 技巧，我们可以利用 border 来做外框，background-color 来设置按钮的背景色，以及 box-shadow来创建内凹的视觉效果。

实现思路：

  1. 镂空边框：通过设置透明的边框和内阴影（box-shadow）来模拟一个镂空效果。
  2. 内凹效果：利用 box-shadow 创建边框的内阴影效果，给人一种内凹的视觉感受。
  3. 圆角：通过 border-radius 来实现圆角效果。

示例代码

1. HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>镂空内凹按钮</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="hollow-button">点击我</button>
</body>
</html>

2. CSS 样式

/* 1. 页面背景和布局 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
  margin: 0;
}

/* 2. 镂空内凹按钮样式 */
.hollow-button {
  padding: 12px 24px; /* 内边距 */
  font-size: 16px; /* 字体大小 */
  color: #007bff; /* 按钮文字颜色 */
  background-color: transparent; /* 背景透明 */
  border: 2px solid #007bff; /* 边框颜色 */
  border-radius: 30px; /* 圆角 */
  outline: none; /* 去掉默认的聚焦边框 */
  cursor: pointer; /* 鼠标悬停时为指针形状 */
  position: relative;
  overflow: hidden; /* 保证内容不超出圆角区域 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 3. 内凹效果：利用 box-shadow 模拟 */
.hollow-button:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: #fff; /* 按钮的背景色 */
  z-index: -1; /* 保证在按钮的背后 */
  border-radius: 30px; /* 圆角 */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); /* 创建内凹阴影 */
  pointer-events: none; /* 禁止影响点击事件 */
}

/* 4. 鼠标悬停时，改变按钮的边框颜色和阴影 */
.hollow-button:hover {
  color: #fff; /* 悬停时文字颜色变为白色 */
  background-color: #007bff; /* 悬停时背景颜色变为蓝色 */
  border-color: #0056b3; /* 悬停时边框颜色变为深蓝色 */
}

/* 5. 鼠标按下时，模拟按钮被按下的效果 */
.hollow-button:active {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3); /* 按下时增加阴影 */
  transform: translateY(2px); /* 模拟按下按钮的效果 */
}

解释

  1. 按钮基础样式：
    • .hollow-button：为按钮设置了透明的背景色（background-color: transparent）和蓝色边框（border: 2px solid #007bff）。通过 border-radius: 30px 创建圆角效果，并通过 outline: none 去掉默认的聚焦边框。
    • position: relative 和 overflow: hidden 确保按钮的内容不会超出圆角区域。
  2. 内凹效果：
    • .hollow-button:before：利用 ::before 伪元素，在按钮内部创建一个额外的层来模拟内凹效果。
    • position: absolute 定位伪元素，使其充满按钮的整个区域（通过 top, left, right, bottom 来控制）。
    • box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2)：box-shadow 的 inset 值会在按钮内部创建阴影，从而模拟内凹效果。
  3. 悬停与按下效果：
    • hover：当鼠标悬停在按钮上时，按钮的背景色、文字颜色和边框颜色都会发生变化。
    • active：当按钮被点击时，通过 box-shadow 增强阴影效果，并且通过 transform: translateY(2px) 来模拟按钮被按下的效果。

结果效果

  • 按钮外观：按钮具有镂空的外观，内部有内凹效果，使按钮看起来像被凹陷了一样。
  • 动态效果：按钮在鼠标悬停时会变色，并且在按下时会有内阴影效果和轻微的按下效果。

总结

通过巧妙地使用 box-shadow 和 ::before 伪元素，结合圆角边框，我们可以创建一个具有镂空内凹效果的按钮。这种效果不仅具有现代感，而且能提供更好的视觉体验，适用于各种交互式按钮设计。你可以根据需求调整按钮的大小、颜色、阴影等样式，达到理想的效果。

如果你有更多问题或需要进一步的优化，欢迎继续提问！