是否可以有透明的边框？

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>