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

是的，完全有可能。

通常情况下，透明边框会显示其下方元素的背景颜色。

这可以通过将背景限制在＆＃34;框来解决。拿着填充物和内容使用background-clip:padding-box（或可选content-box，仅将背景剪辑到内容区域。）

然后你可以添加一个boxshadow（例如），它将位于外面透明边框。

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

Answer 4

是的，可以有透明的边框。只需使用rgba颜色定义：

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

最后一个值0.5从0变为1，并且是颜色

的不透明度（或alpha）值

工作示例（请参阅悬停时边框透明度的变化情况）：jsFiddle

是否可以有透明的边框？

4 个答案: