是否可以有透明的邊框？

Question

我的邊框有這個代碼：

border: 1px solid #CCC;

是否有可能有一些類似的CSS，其中邊框有寬度但不可見。 換句話說，如果有藍色背景，那么就會顯示出邊界？

Answer 1

保證金占據空間並且是透明的。 邊距占據的空間位於元素的外部，因此它采用父元素的背景顏色。 如果您希望它是與您正在修改的元素具有相同背景顏色的空間，則需要使用填充。

這是一個很好的資源，可以向您展示您可能需要的內容： https ： //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Answer 2

您只需將border-color設置為transparent

Answer 3

是的，這完全有可能。

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

這可以通過使用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> 

Answer 4

是的，可以有透明的邊框。 只需使用rgba顏色定義，如下所示：

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

最后一個值0.5從0變為1，並且是顏色的不透明度（或alpha）值

工作示例（查看懸停時邊框透明度如何變化）： jsFiddle