46 x 96px我有一个尺寸为、边框半径为 的引导按钮22px，当我悬停此按钮时，我想将背景颜色设置为40 x 90px。（我不想填满整个按钮）我知道这可以使用 a 来完成，box-shadow但我有不同的页面，其中使用了此按钮，并且页面颜色不同，所以我不想逐页更改框阴影颜色以匹配页面的背景颜色。有什么简单的方法可以做到这一点吗？
2 回答
手掌心
TA贡献1942条经验 获得超3个赞
您可以利用该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>
正如您从边框中看到的，按钮大小没有改变，但背景只是没有从内容延伸到边框。
小怪兽爱吃肉
TA贡献1852条经验 获得超1个赞
悬停时，尝试添加与按钮背景大小相匹配的透明边框，并根据需要6px进行更改。background-color这将达到预期的效果，但也会在视觉上减小按钮的尺寸。从你的问题来看，尚不清楚这是否是可接受的副作用。
- 2 回答
- 0 关注
- 60 浏览
添加回答
举报
0/150
提交
取消