具有半透明邊框的CSS線性漸變

我使用具有半透明邊框的線性漸變創建模塊和按鈕等。使用（例如）rgba(0,0,0,0.1)作爲邊框顏色很方便，因爲我可以設置任何背景顏色在我的元素上，而不必再擔心邊框顏色。具有半透明邊框的CSS線性漸變

但是我注意到一個非常奇怪的效果 - 當與線性漸變背景相結合時，瀏覽器使用元素的填充框的高度來計算漸變的高度，這意味着它會在頂部和底部邊距上重複，創造一個非常奇怪的效果：

這裏是產生「實際」框中的CSS：

.box { 
    box-sizing: border-box; 
    height: 100px; 
    width: 100px; 
    border: 25px solid rgba(0,0,0,0.1); 
    background-color: #eee; 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); 
    margin-bottom: 20px; 
}

現在我已經找到了解決辦法，讓我達到預期的效果，通過強制background-size爲100％+邊框尺寸。這是什麼產生了「期望」框（.box2）：

.box2 { 
    background-position: 0 center; 
    background-size: auto calc(100% + 50px); 
}

但是，這似乎有點hacky。

所以我的問題是：任何人都可以解釋爲什麼這是 - 我找不到它記錄在任何地方，有沒有人有一個整潔的解決方案？

這裏的JS小提琴，我用來創建實例，也包括與實際圖像背景比較框：http://jsfiddle.net/29rgksgx/4/

來源

2015-09-10 beercohol

還有就是爲什麼出現這種情況的詳細說明（爲什麼瓦爾斯的回答中提到的財產修復它）在我的答案鏈接線。 – Harry

您可以選擇的箱子被用來作爲背景參考

選擇邊界框，也將努力爲所需

可以邊框的內容和填充盒

.box { 
 
    box-sizing: border-box; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 25px solid rgba(0,0,0,0.1); 
 
    background-color: #eee; 
 
    margin-bottom: 20px; 
 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); 
 
    background-origin: border-box; /* the trick */ 
 
}

<div class="box"></div>

0之間選擇

來源

2015-09-10 21:49:11 vals

太棒了，那就算了！謝謝。 – beercohol

具有半透明邊框的CSS線性漸變

回答

相關問題