我想為引導(dǎo)按鈕添加樣式，使它們具有不同背景顏色的兩個部分。像這樣的東西：我已經(jīng)嘗試過這個：.btn{
background-image: linear-gradient(-90deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.3) 30%);
}但我不能使用 % 來設(shè)置顏色之間的過渡位置，因為這樣就會發(fā)生：我需要一種方法來設(shè)置固定數(shù)量的像素。這不起作用：.btn{ background-image: linear-gradient(-90deg, rgba(0,0,0,0), rgba(0,0,0,.3) 32px);}怎么可能呢？更新感謝@AmauryHanser 提供的解決方案（我的解決方案并不遙遠(yuǎn)！;））我已將其改進(jìn)為我認(rèn)為一些非常好的按鈕，并保持代碼非常整潔和可讀：CSS：.btn { background-image: linear-gradient(90deg, rgba(0,0,0,.4) 36px, rgba(0,0,0,0) 36px); padding-left:0px;}.fas { margin-left: 8px; margin-right: 10px; color: rgba(255,255,255,.8);}html:<a href="#" class="btn btn-primary"> <span class="fas fa-arrow-circle-left fa-fw"></span> Avslutt uten ? lagre</a><button type="submit" class="btn btn-success"> <span class="fas fa-save fa-fw"></span> Lagre</button>結(jié)果：請注意 的使用fa-fw，它設(shè)置 FontAwesome 圖標(biāo)的固定寬度。為了讓文本在所有按鈕上的相同像素位置開始，這是必要的。
1 回答
鳳凰求蠱
TA貢獻(xiàn)1825條經(jīng)驗 獲得超4個贊
您可以在線性漸變定義中使用像素
.btn{
display: inline-block;
background-image: linear-gradient(to right, rgba(0,0,0,0) 40px, rgba(0,0,0,.3) 40px);
}
<a class="btn">ICON Text</a>
你可以看到我用了to right代替-90deg，這樣更容易理解。
- 1 回答
- 0 關(guān)注
- 113 瀏覽
添加回答
舉報
0/150
提交
取消