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 關注
- 188 瀏覽
添加回答
舉報
0/150
提交
取消