我想為引導按鈕添加樣式，使它們具有不同背景顏色的兩個部分。像這樣的東西：我已經嘗試過這個：.btn{
background-image: linear-gradient(-90deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.3) 30%);
}但我不能使用 % 來設置顏色之間的過渡位置，因為這樣就會發生：我需要一種方法來設置固定數量的像素。這不起作用：.btn{ background-image: linear-gradient(-90deg, rgba(0,0,0,0), rgba(0,0,0,.3) 32px);}怎么可能呢？更新感謝@AmauryHanser 提供的解決方案（我的解決方案并不遙遠！;））我已將其改進為我認為一些非常好的按鈕，并保持代碼非常整潔和可讀：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>結果：請注意 的使用fa-fw，它設置 FontAwesome 圖標的固定寬度。為了讓文本在所有按鈕上的相同像素位置開始，這是必要的。
1 回答
鳳凰求蠱
TA貢獻1825條經驗 獲得超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 關注
- 108 瀏覽
添加回答
舉報
0/150
提交
取消