如何设置 html 按钮背景颜色的边距

Question

46 x 96px我有一个尺寸为、边框半径为 的引导按钮22px，当我悬停此按钮时，我想将背景颜色设置为40 x 90px。（我不想填满整个按钮）

我知道这可以使用 a 来完成，box-shadow但我有不同的页面，其中使用了此按钮，并且页面颜色不同，所以我不想逐页更改框阴影颜色以匹配页面的背景颜色。

有什么简单的方法可以做到这一点吗？

Answer 1

您可以利用该backgroud-clip属性来利用这一点。background-clip CSS 属性设置元素的背景是否延伸到其边框框、内边距框或内容框下方。将按钮的大小设置为 40 像素 x 90 像素，并添加 3 像素的填充。然后在悬停时，设置background-clip: content-box背景颜色将仅限于内容而不是填充。夸张的例子如下：body {  background: lightgreen;}.button {  height: 30px;  width: 80px;  border-radius: 22px;  background: blue;  display: flex;  justify-content: center;  align-items: center;  margin: 2em;  padding: 8px;  border: 1px solid red;  color: white;}.button:hover {  background-clip: content-box;}<div class="button">Button</div>正如您从边框中看到的，按钮大小没有改变，但背景只是没有从内容延伸到边框。

Answer 2

悬停时，尝试添加与按钮背景大小相匹配的透明边框，并根据需要6px进行更改。background-color这将达到预期的效果，但也会在视觉上减小按钮的尺寸。从你的问题来看，尚不清楚这是否是可接受的副作用。