是否有可能拥有一个透明的边框？

Question

我有以下代码用于设置边框：

border: 1px solid #CCC;

是否可能使用类似的CSS，使边框具有宽度但不可见。换句话说，如果有一个蓝色的背景，那么蓝色将会从边框中透过来显示出来？

- Samantha J T Star

---

为什么不完全摆脱边框，或将其设置为0像素。如果需要，不要忘记您有CSS填充。 - lucas

你试过看看会发生什么吗？ - user5306470

border: 1px solid transparent; 或 border: 1px solid rgba(0,0,0,0); 与 {background-clip:content-box;} 结合使用无效？ - G-Cyrillus

@lucas 有时需要一个透明的边框。主要是当你想要看到边框但又想隐藏它时。这样做更有意义，可以使其透明并添加颜色，而不是去掉边框。 - Neville Nazerane

Answer 1

边距占用空间并且是透明的。边距占用的空间在元素的外部，因此它会采用父元素的背景颜色。如果你想要它成为与修改的元素相同背景颜色的空间，您需要使用padding。

这是一个很棒的资源，它可以向你展示你可能想要的内容： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

- Taylor

---

在Chrome检查器中的盒模型对于了解元素的样式如何被设置也是非常有用的。 - perennial_

Answer 2

您可以将border-color设置为transparent来实现。

- m_callens

---

“translucent”在CSS的“color”数据类型中不存在关键字。 - Shaggy

@Shaggy 嗯...你说得对，出于某种原因我还以为那也是一个关键字。谢谢。 - m_callens

请记得也使用 solid，否则浏览器可能会隐藏该边框。 - Fifnmar

Answer 3

是的，完全有可能。

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

可以通过使用background-clip:padding-box（或可选的content-box，仅将背景剪辑到内容区域）来限制背景仅在“盒子”中保持填充和内容。

然后，您可以添加一个框阴影（例如），它将位于透明边框外部。

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>

- Paulie_D

---

这就是我一直在寻找的答案：透明度可以穿透元素自己的背景色到达其下方的元素。很难确定这是否是 OP 特别需要的... 你应用的 box-shadow 让我不得不检查元素以确认细节。 - Sideways S

Answer 4

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

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

最后一个值0.5从0到1，是颜色的不透明度（或alpha值）

工作示例（查看边框透明度在悬停时如何更改）：jsFiddle

- Shaunak