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

我有此代码为我的境界：是否有可能具有透明边框？

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

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

回答

相关问题