46 x 96px我有一個(gè)尺寸為、邊框半徑為 的引導(dǎo)按鈕22px，當(dāng)我懸停此按鈕時(shí)，我想將背景顏色設(shè)置為40 x 90px。（我不想填滿整個(gè)按鈕）我知道這可以使用 a 來完成，box-shadow但我有不同的頁面，其中使用了此按鈕，并且頁面顏色不同，所以我不想逐頁更改框陰影顏色以匹配頁面的背景顏色。有什么簡單的方法可以做到這一點(diǎn)嗎？
2 回答
手掌心
TA貢獻(xiàn)1942條經(jīng)驗(yàn) 獲得超3個(gè)贊
您可以利用該backgroud-clip屬性來利用這一點(diǎn)。
background-clip CSS 屬性設(shè)置元素的背景是否延伸到其邊框框、內(nèi)邊距框或內(nèi)容框下方。
將按鈕的大小設(shè)置為 40 像素 x 90 像素，并添加 3 像素的填充。
然后在懸停時(shí)，設(shè)置background-clip: content-box背景顏色將僅限于內(nèi)容而不是填充。
夸張的例子如下：
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>
正如您從邊框中看到的，按鈕大小沒有改變，但背景只是沒有從內(nèi)容延伸到邊框。
小怪獸愛吃肉
TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個(gè)贊
懸停時(shí)，嘗試添加與按鈕背景大小相匹配的透明邊框，并根據(jù)需要6px進(jìn)行更改。background-color這將達(dá)到預(yù)期的效果，但也會在視覺上減小按鈕的尺寸。從你的問題來看，尚不清楚這是否是可接受的副作用。
- 2 回答
- 0 關(guān)注
- 204 瀏覽
添加回答
舉報(bào)
0/150
提交
取消