是否有可能具有透明邊框？

我有此代碼爲我的境界：是否有可能具有透明邊框？

border: 1px solid #CCC;

是否有可能有一些類似的CSS在邊框的寬度，但它是不可見的。換句話說，如果有一個藍色的背景，那麼這將顯示通過邊界？

來源

2016-08-02 Samantha J T Star

你爲什麼不擺脫邊框一起的話，或將其設置爲0px。不要忘記你有必要的css填充 – lucas

你試過看看會發生什麼？ –

'border：1px solid transparent;'或'border：1px solid rgba（0,0,0,0）;'with {background-clip：content-box;'does not work？ –

您可以只設置border-color到transparent

來源

2016-08-02 19:20:17

「半透明」不作爲關鍵字中的關鍵字存在CSS'color'數據類型。 – Shaggy

@Shaggy嗯...你是對的，出於某種原因，我雖然也是一個關鍵字。謝謝 –

邊距佔用空間且透明。邊緣佔據的空間位於元素的外部，因此它採用父元素的背景顏色。如果你希望它的空間與你正在修改的元素具有相同的背景顏色，你會想要使用填充。

這是一個偉大的資源，顯示您可能會想： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

來源

2016-08-02 19:19:27 Taylor

鉻檢查器中的盒子模型對於理解元素的正確設計方式也很有用 – WookieCoder

是的，它可能有透明邊框。只需使用RGBA顏色認定中，像這樣：

border: 10px solid rgba(50,50,50,.5);

的最後一個值0.5從0到1，是顏色

動作示例的不透明度（或Alpha）值（見邊界的透明度如何變化上懸停）：jsFiddle

來源

2016-08-02 19:20:27 Shaunak

是的，這是完全可能的。

通常，透明邊框會顯示其下的元素的背景顏色。

這可以通過限制背景的「盒子」保持使用填充&內容background-clip:padding-box（或任選content-box這將夾背景爲僅在內容區域）來克服。

然後你可以添加一個boxshadow（例如），它將坐在之外的的透明邊框。

body { 
 
    background: linear-gradient(to bottom, orange, pink); 
 
} 
 
div { 
 
    width: 200px; 
 
    height: 200px; 
 
    box-sizing: border-box; 
 
    background: rebeccapurple; 
 
    margin: 2em auto; 
 
    border: 10px solid transparent; 
 
    box-shadow: 0 0 5px 5px green; 
 
    background-clip: padding-box; 
 
}

<div></div>

來源

2016-08-02 19:38:03

是否有可能具有透明邊框？

回答

相關問題