如何在活动按钮中设置阴影 css

Question

第一张照片是按钮未激活时的照片。第二张照片是单击按钮时的照片。这段代码不是我的。我已经阅读了代码，但我仍然不明白边框阴影从何而来。这些按钮有一个名为“random-btn”的 class。这是关于 random-btn 的唯一 css 代码：

.random-btn {
  margin-top: 0.5rem;
  background: var(--clr-primary-10);
  color: var(--clr-primary-5);
  padding: 0.25rem 0.5rem;
  outline: none;
  text-transform: capitalize;
  border-radius: var(--radius);
  transition: var(--transition);
  border-color: var(--clr-primary-5);
  cursor: pointer;
}
.random-btn:hover {
  background: var(--clr-primary-5);
  color: var(--clr-primary-1);
}

也是上面提到的以下变量：

--clr-primary-10: hsl(205, 100%, 96%);
--clr-primary-5: hsl(205, 78%, 60%);
--clr-primary-1: hsl(205, 86%, 17%);

Answer 1

它来自浏览器为按钮提供的默认属性。就是border-style属性.

如果您使用 Chrome 开发者工具，默认样式为斜体，您可以看到 border-style.

.btn {
  border-style: outset;
}

.btn:hover {
  border-style: inset;
}

<button class="btn">Click me</button>

这是一个显示所有 border-style 的示例。

.btn {
  animation: borders 10s infinite;
  border-width: 5px;
  padding: 1em;
}

.btn::after {
  animation: bordersNames 10s infinite;
  display: inline-block;
  margin-left: 1em;
  content: "";
}

@keyframes borders {
  0% {
    border-style: dotted;
  }
  10% {
    border-style: dashed;
  }
  20% {
    border-style: solid;
  }
  30% {
    border-style: double;
  }
  40% {
    border-style: groove;
  }
  50% {
    border-style: ridge;
  }
  60% {
    border-style: inset;
  }
  70% {
    border-style: outset;
  }
  80% {
    border-style: initial;
  }
  90% {
    border-style: none;
  }
  100% {
    border-style: dotted;
  }
}

@keyframes bordersNames {
  0% {
    content: "dotted";
  }
  10% {
    content: "dashed";
  }
  20% {
    content: "solid";
  }
  30% {
    content: "double";
  }
  40% {
    content: "groove";
  }
  50% {
    content: "ridge";
  }
  60% {
    content: "inset";
  }
  70% {
    content: "outset";
  }
  80% {
    content: "initial";
  }
  90% {
    content: "none";
  }
  100% {
    content: "dotted";
  }
}

<button class="btn">My border is</button>

如何在活动按钮中设置阴影 css

how to set up shadow in a button active css

css

frontend

button

web-frontend